在D3中更新图例名称

时间:2017-09-24 11:10:31

标签: javascript d3.js coffeescript legend nvd3.js

目前,我正在使用d3。当我在d3中尝试更新图例名称时,它会更新名称,但在删除旧名称后留下空格。

enter image description here

enter image description here

如果您看到图像我更新了测试公式2以测试公式4,则d3删除了测试公式2并将其更新为测试公式4,但在测试公式1和3之间留出空格。我发布了我的代码以供参考。数据是图表上显示的数据。

svgData = svg.select('g.data').selectAll('g.datum').data data, (d)-> d.key
newData = svgData.enter()
  .append 'g'
  .classed 'datum', true
legends = newData.append 'g'
  .classed 'legend-entry', true
  .attr 'opacity', 1
  .on 'click', hidden.toggle
legends.append 'circle'
  .attr 'r', 2
  .attr 'cx', 1
  .attr 'stroke-width', 1
  .attr 'fill', (d)-> scales.color(d.key)
  .attr 'stroke', (d)-> scales.color(d.key)
legends.append 'text'
  .attr 'x', 5
  .attr 'y', 2.5
  .attr 'font-size', 7
  .text (d)-> d.key
legends = svg.selectAll('g.legend-entry')
try
 entryWidth = _.memoize((d)-> d3.select(d).node().getBBox().width)
 legends.attr 'transform',  (d, i)->"translate(#{width-
  2.5*d3.sum(legends[0].slice(0, i+1), entryWidth)} #{gutters.top-10}) scale(2)"
catch err
  console.warn 'problem placing legends; '+err.message`

0 个答案:

没有答案