无法更改图例符号 nvd3 气泡图

Question

在我的 nvd3 气泡图中，每组点都有一个不同的符号，但图例都是圆形的。代码是here。我只遇到过这个

.showLegend(false)

可以隐藏或显示图例。 我无法理解如何更改图例中的符号。

Answer 1

nvd3 不允许您直接访问图例的内部结构。但是，您可以使用 d3 选择来相当轻松地对其进行更改，以操纵其各个部分。

首先创建一个包含类nv-series 的所有元素的选择。此类表示图例中的单个组，同时包含圆形符号和文本（在您的情况下为“Group0”、“Group1”等）。这将返回一个数组，第一个元素（索引 0）是所有元素的数组：

// all `g` elements with class nv-series
d3.selectAll('.nv-series')[0]

接下来，使用Array.forEach() 函数遍历这个数组，并为每个元素用适当的符号替换圆元素，使填充颜色与被移除的圆相匹配。

为了做到这一点，您还需要重用您之前创建的符号列表，并遍历它们，以便为每个组分配正确的符号。这是实现这一目标的一种方法，但也许您可以想到一种更简单的方法：

// reuse the order of shapes
var shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'];
// loop through the legend groups
d3.selectAll('.nv-series')[0].forEach(function(d,i) {
  // select the individual group element
  var group = d3.select(d);
  // create another selection for the circle within the group
  var circle = group.select('circle');
  // grab the color used for the circle
  var color = circle.style('fill');
  // remove the circle
  circle.remove();
  // replace the circle with a path
  group.append('path')
    // match the path data to the appropriate symbol
    .attr('d', d3.svg.symbol().type(shapes[i]))
    // make sure the fill color matches the original circle
    .style('fill', color);
});

这是更新后的JSFiddle。

---

===== 编辑 =====

我已经浏览了 nvd3 代码库，有一种更简单的方法可以在图例符号停用时触发它取消填充。它可以简单地定位在您的 css 中，因为该系列在禁用时会被赋予一个 disabled 类。

如果添加以下css...

.nv-series.disabled path {
    fill-opacity: 0;
}

...然后您可以删除所有 hacky JavaScript 点击处理。它更干净，实际上是他们使用默认圆形元素时的处理方式。

这是更新后的JSFiddle。