时间戳

首页 > 解决方案 > 使用 d3.line.defined() 之类的东西绘制点的 d3 图

javascript - 使用 d3.line.defined() 之类的东西绘制点的 d3 图

问题描述

我想绘制一个 d3 线图，显示数据点的点，如向 D3.js 图添加点。但我想使用像 d3.line.defined() 这样的函数来将某些数据值定义为不可图形化。

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

标签： javascriptd3.js

解决方案

我的直觉似乎起作用了。因此，如果我的折线图是

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

推荐阅读