Question

我有个here堆炸弹

我有一个条形图，其中的条形带有开始值和结束值。

开始值和结束值可以彼此较高或较低，因此我想在条形图上显示箭头，指示值是上升还是下降。

这在我的示例中有效，但在值非常接近时中断。在我的示例中，第一个栏-起点：100，终点：100.1，但箭头向下显示。

我不确定为什么会这样，但是在这些情况下，我想隐藏箭头。

如何在回车阶段的此部分添加条件语句，类似。

if(d.start !== d.finish){}
    bar.enter()
        .append("line")
        .attr("x1", d => this.x(d.phase) + this.x.bandwidth()/2)
        .attr("y1", d => this.y(d.start) + ((d.start < d.finish) ? -5 : 5) )
        .attr("x2", d => this.x(d.phase) + this.x.bandwidth()/2)
        .attr("y2", d => this.y(d.finish) + ((d.start < d.finish) ? 5 : -5) )
        .attr("stroke","#000")
        .attr("stroke-width",2)
        .attr("marker-end","url(#arrow)");    
}

Answer 1

您可以在'marker-end'中设置一个条件，如果您也不希望使用该行，则可以使用'stroke-width'属性，即某些已定义的'smallAmount'：

bar.enter()
  .append("line")
    .attr("x1", d => this.x(d.phase) + this.x.bandwidth()/2)
    .attr("y1", d => this.y(d.start) + ((d.start < d.finish) ? -5 : 5) )
    .attr("x2", d => this.x(d.phase) + this.x.bandwidth()/2)
    .attr("y2", d => this.y(d.finish) + ((d.start < d.finish) ? 5 : -5) )
    .attr("stroke", "#000")
    .attr("stroke-width", d => Math.abs(d.finish - d.start) < smallAmount ?  0 : 2)
    .attr("marker-end", d => Math.abs(d.finish - d.start) < smallAmount ? "none" : "url(#arrow)");

D3-如何在enter中使用条件语句

1 个答案: