javascript - 如何根据值的变化修改D3js图表？

Question

我有一个使用 d3js 构建的图表，我想在图表上绘制红线或其他类型的指示器，以指示图表蓝线的值何时达到 0(在本例中为 6 月 6 日)。图表示例http://jsfiddle.net/wRDXt/81/

我的出发点是:

if(dataset.value = 0){
   //draw line 
}

但我不知道从这里该去哪里。任何帮助将不胜感激。

Answer 1

有几种不同的方法可以做到这一点。一种方法是过滤数据集以创建一个仅包含值为 0 的条目的新数组。

var zeroData = dataset.filter(function(d){
    if (d.value == 0) return d; 
});

这个新数组可用于使用新数组作为数据，通过单独的 svg.selectAll(".redlines") 在每个零点绘制线条。

// plot lines
svg.selectAll(".redline")
    .data(zeroData)
    .enter()
    .append("line")
    .attr("class", "redline")
    .attr("x1", function(d) { return xScale(d.date); })
    .attr("x2", function(d) { return xScale(d.date); })
    .attr("y1", 0)
    .attr("y2", 250)
    .style("stroke", "#ff0000");

http://jsfiddle.net/wRDXt/85/

另一种方法是首先为每个数据点附加一个“g”元素而不是一个圆，然后为每个点添加一个圆和一条线。样式可用于仅使值 == 0 点可见。

// plot data points as g elements
var datapts = svg.selectAll(".data-point")
    .data(dataset);

var dataptsEnter = datapts
    .enter()
    .append("g")
    .attr("class", "data-point")
    .attr("transform", function(d) {
        return "translate(" + xScale(d.date) + "," + yScale(d.value) + ")";

    });

dataptsEnter
    .append("circle")
    .attr("class", "data-point-circle")
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", 5);

dataptsEnter
    .append("line")
    .attr("x1", 0)
    .attr("y1", 0)
    .attr("x2", 0)
    .attr("y2", -50)
    .style("stroke", "#ff0000")
    .style("opacity", function(d) {
        if (d.value == 0) return 1;
        return 0;
    });

http://jsfiddle.net/wRDXt/82/

在第二种方法中，每个数据点都有一条红线，但使用不透明度来仅使零值可见。

我会使用第一种方法。