Question

我正在使用d3.js v5版本，并试图了解输入，更新。我有两个数据集[1,2,3.5]和另一个[1,2,3,4,5]。首先，我调用第一个以红色显示[1,2,3.5]的数据，然后以蓝色[1,2,3,4,5]调用第二个数据。

在更新中，为什么3不会以蓝色插入？

              var scale = d3.scaleLinear().domain([1,5]).range([0,200]);
            
            
              var svg = d3.select("body")
                          .append("svg")
                          .attr("width",250)
                          .attr("height",250);
            
            function render(data,color){
                 // Bind data
                 var rects = svg.selectAll("rect").data(data);
                 
                 //Enter 
                 
                rects =  rects.enter().append("rect");
                
                //update
                rects.attr("x", scale)
                .attr("y",50)
                .attr("width",20)
                .attr("height",20)
                .attr("fill",color);
            };
             
            render([1,2,3.5],"red");
            render([1,2,3,4,5],"blue");

<script src="https://d3js.org/d3.v5.min.js"></script>

Answer 1

这是因为您正在将rects分配给rects.enter()。最初rects包含“更新的”矩形。您想要的是同时获得“输入”和“更新”，这可以通过merge完成。

var scale = d3.scaleLinear().domain([1,5]).range([0,200]);
            
var svg = d3.select("body")
            .append("svg")
            .attr("width",250)
            .attr("height",250);

function render(data,color){
    // update
    var rects = svg.selectAll("rect").data(data, d => d);

    // enter 
    rects
      .enter().append("rect")
      // enter + update
      .merge(rects)
        .attr("x", scale)
        .attr("y",50)
        .attr("width",20)
        .attr("height",20)
        .attr("fill",color);
};

render([1,2,3.5],"red");
render([1,2,3,4,5],"blue");

<script src="https://d3js.org/d3.v5.min.js"></script>

编辑：默认情况下，当您调用.data(...)时，d3按索引联接，因此3.5变为3。如果要按数值连接，以便插入3，4和5，则可以将第二个参数传递给.data（更多信息
https://github.com/d3/d3-selection#selection_data）

d3.js v5输入更新未插入矩形div

1 个答案: