如何使用javascript d3更新数据？

Question

我正在绘制一个带有不同圆圈的图。 每个圆都有固定的位置，但是每个圆的大小可以通过html输入字段分别更改。

用于输入字段的代码是这样的：

<input type="text" id="size1" class="size" value="" style="width: 30px;">

我已将数据保存在此数据集中：

var dataset = [{name: "circle1", xpos: -413, ypos: 278, color: "black", radius: $('#size1').val(),},
            {name: "circle2", xpos: -161, ypos: 290, color: "black", radius: $('#size2').val(),}];

这是我画圆的方式：

function drawCircle () {
            svg.selectAll("circle").remove();
            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("svg:circle")
               .attr("cx", function(d){
                        return xScale(d.xpos);})
               .attr("cy", function(d){
                        return yScale(d.ypos);})
               .attr("r", function (d){            
                        return rScale(d.radius);})                          
               .attr("fill", "rgb(100,0,0)")
               .attr("opacity", "0.7");
        }

最后，我触发一个触发器，当发生某些更改时，将再次绘制圆：

$('.size').change(function(){
            radius = $(this).val(); 
            svg.selectAll("circle")
               .transition()
               .duration(750)
               .attr("r", function (d){            
                        return rScale(radius);})
        });

这样，当我更改＃size1或＃size2中的值时，两个圆都将使用最后输入的值重绘。

我的问题是：如何更新数据集，使每个圈子都可以“侦听”自己的输入字段？

Answer 1

我假设您有多个输入字段。

在其中一个字段上进行更改，重新创建数据集并重新绘制圆时，您可以做什么。

数据集的静态数据可以存储在输入的数据属性中。

像这样：

的HTML

<input type="text" id="circle1" class="size" value="" style="width: 30px;" data-circle='{"name": "circle1", "xpos": -161, "ypos": 290, "color": "black" }'>

javascript

function drawCircles (dataset) {
        svg.selectAll("circle").remove();
        svg.selectAll("circle")
           .data(dataset)
           .enter()
           .append("svg:circle")
           .attr("cx", function(d){
                    return xScale(d.xpos);})
           .attr("cy", function(d){
                    return yScale(d.ypos);})
           .attr("r", function (d){            
                    return rScale(d.radius);})                          
           .attr("fill", "rgb(100,0,0)")
           .attr("opacity", "0.7");
    }

$('.size').change(function(){
        var dataset = [];
        $('.size').each(function(index,item) {
          var circleData = item.data('circle');
          var circleData['radius'] = $(item).val();
          dataset.push(circleData);
        });
        drawCircles(dataset);
    });