Блог

Здесь у меня есть stackblitz

У меня есть столбчатая диаграмма, где столбцы создаются со значениями start и finish.

Начальные и конечные значения могут быть выше или ниже друг друга, поэтому я хочу показать стрелки на столбцах, показывающие, увеличиваются или уменьшаются значения.

Это работает в моем примере, но прерывается, когда значения и очень близки. В моем примере первая строка — start: 100, finish: 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)");    
}       
  

У вас могло бы быть условное обозначение в вашем ‘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)");