javascript - D3更新模式两次绘制相同的元素

Question

我在 D3 中创建了一个折线图。为确保该线不与 y 轴重叠，我更改了 x 轴的范围。因此，我试图用另一条线填充 x 轴和 y 轴之间的间隙。

图表的其余部分使用 D3 更新模式。但是，当我尝试在这条简单的线上使用该模式时，会绘制两个路径元素(一个在另一个之上)。我已经尝试了很多解决方案来纠正这个问题，但我没有任何运气。有人有什么建议吗？

下面的代码是绘制两个相同路径的元素

var xAxisLineData = [
    { x: margins.left     , y: height - margins.bottom + 0.5 },
    { x: margins.left + 40, y: height - margins.bottom + 0.5 }];

var xAxisLine = d3.line()
                .x(function (d) { return d.x; })
                .y(function (d) { return d.y; });

    var update = vis.selectAll(".xAxisLine")
                 .data(xAxisLineData);

    var enter = update.enter()
                .append("path")
                .attr("d", xAxisLine(xAxisLineData))
                .attr("class", "xAxisLine")
                .attr("stroke", "black");

Answer 1

你的问题在这里:

var update = vis.selectAll(".xAxisLine")
             .data(xAxisLineData);

这是一个空选择，假设没有类 xAxisLine 的元素，这意味着使用 .enter().append() 将为xAxisLineData 数组中的每一项。

您想为每组代表一条线的点附加一条路径，而不是为代表一条线的一组点中的每个点附加一条路径。

你真的只想画一条线，所以你可以这样做:

.data([xAxisLineData]);

或者，在定义 xAxisLineData

时将所有点放在一个数组中

现在您将一个数据数组传递给包含一个项目的选择:一个点数组 - 而不是代表单个点的许多项目。由于数据数组只有一项，而您的选择是空的，使用 .enter().append() 将追加一个元素:

var svg = d3.select("body").append("svg").attr("width",500).attr("height",400);

var lineData = [{x:100,y:100},{x:200,y:200}]

var xAxisLine = d3.line()
                .x(function (d) { return d.x; })
                .y(function (d) { return d.y; });
                
var colors = ["steelblue","orange"];
  
var line = svg.selectAll(null)
  .data([lineData])
  .enter()
  .append("path")
  .attr("d", xAxisLine(lineData))
  .attr("class", "xAxisLine")
  .attr("stroke-width", function(d,i) { return (1-i) * 10 + 10; })
  .attr("stroke", function(d,i) { return colors[i]; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

在不使用数组保存所有数据点的情况下进行比较:

var svg = d3.select("body").append("svg").attr("width",500).attr("height",400);

var lineData = [{x:100,y:100},{x:200,y:200}]

var xAxisLine = d3.line()
                .x(function (d) { return d.x; })
                .y(function (d) { return d.y; });
                
var colors = ["steelblue","orange"];
  
var line = svg.selectAll(null)
  .data(lineData)
  .enter()
  .append("path")
  .attr("d", xAxisLine(lineData))
  .attr("class", "xAxisLine")
  .attr("stroke-width", function(d,i) { return (1-i) * 10 + 10; })
  .attr("stroke", function(d,i) { return colors[i]; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

但是，我们可以做最后的改变。由于数据数组中的每个项目都绑定(bind)到元素，我们可以引用数据，而不是数据数组 xAxisLineData，这将使添加多条线更容易:

.attr("d", function(d) { return xAxisLine(d) })

请注意，在下面的演示中，变量 xAxisLineData 被定义为点数组或多线数组。

var svg = d3.select("body").append("svg").attr("width",500).attr("height",400);

var lineData = [[{x:100,y:100},{x:200,y:200}],[{x:150,y:150},{x:260,y:150}]]

var xAxisLine = d3.line()
                .x(function (d) { return d.x; })
                .y(function (d) { return d.y; });
                
var colors = ["steelblue","orange"];
  
var line = svg.selectAll(null)
  .data(lineData)
  .enter()
  .append("path")
  .attr("d", function(d) { return xAxisLine(d) }) // use the element's datum 
  .attr("class", "xAxisLine")
  .attr("stroke-width", function(d,i) { return (1-i) * 10 + 10; })
  .attr("stroke", function(d,i) { return colors[i]; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>