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);
    });

如何使用javascript d3更新数据？

1 个答案: