Question

我想绘制一个d3线形图，显示数据点的点，如Adding dots to D3.js graph所示。但是我想使用d3.line.defined（）之类的函数将某些数据值定义为不可绘制的。

显然，这将适用于折线图，但是对于要为“点”绘制的圆，我该如何做呢？也许这很简单，但我不太了解如何做。也许是过滤数据数组的问题。

Answer 1

我的直觉确实有效。因此，如果我的线图是

var line = d3.line()
    .defined(isdefined)  
    .x(function (d) {
        return x(d.xVal);
    })
    .y(function (d) {
        return y(d.yVal);
    })
   .curve(d3.curveMonotoneX);

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height)
   .append("g");
svg.append("path")
   .attr("d", line(data));

然后，我可以使用相同的函数（isDefined）在数据点处添加“点”（圆圈）来确定有效数据

svgG.selectAll('circle')
    .data(data.filter(isdefined))
    .enter().append('circle')
    .attr('r', 5)
    .attr('cx', function(d) {
        return x(d.xVal);'
    })
    .attr('cy', function(d) {
        return y(d.yVal);'
    })

请参阅以下代码库中的工作示例：https://codepen.io/hrabinowitz/pen/rqNBxg

使用d3.line.defined（）

1 个答案: