如何在 Plottable.js 中给 GuideLine 上色？

Question

我正在尝试找到一种简单的方法来为 Plottable.js 中的 GuideLineLayer 着色。

到目前为止我尝试了以下方法。

1) 尝试在 onAnchor() 中使用 attr() 这会将 attr 添加到包含 line 元素的 g 元素，但似乎没有任何效果。难道是CSS优先？

 var guidelineMax = new Plottable.Components.GuideLineLayer('horizontal')
    .value(222)
    .onAnchor(function(c) {
      c.content().attr('stroke', '#F00')
    })
    .scale(yScale)

2) 使用 addClass() 这是完全不直观的，因为它为图表的边界而不是指南着色。

.red {
  stroke: #F00;
}

 var guidelineMax = new Plottable.Components.GuideLineLayer('horizontal')
    .value(state[state.param].max)
    .addClass('red')
    .scale(yScale)

Answer 1

我已经接近第二个解决方案了。 addClass() 将给定的 class 添加到 component-group，这意味着我必须修改我的 CSS 以仅针对指南。

.plottable .guide-line-layer.red .content line.guide-line {
  stroke: #FF0000;
}

如何在 Plottable.js 中给 GuideLine 上色？

How to color GuideLine in Plottable.js?

javascript

svg

plottable