无法更改图例符号nvd3气泡图 [英] unable to change legend symbol nvd3 bubble chart

问题描述

在我的nvd3气泡图中，每组点都有一个不同的符号，但图例全部用圆圈表示.该代码是此处.我只是碰到了这个

In my nvd3 bubble chart, each group of points has a different symbol but the legend has all as circles. The code is here. I have only come across this

.showLegend(false)

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

which enables to hide or show the legend. I am unable to understand how to change the symbols in the legend.

推荐答案

nvd3不允许您直接访问图例的内部.但是，您可以使用d3选择来操纵它的各个部分，从而相当容易地对其进行更改.

nvd3 does not give you direct access to the internals of the legend. However, you can alter it fairly easily using d3 selections to manipulate its various parts.

首先创建所有选择的类为nv-series的元素.此类表示图例中的单个组，同时包含圆圈符号和文本(在您的情况下为"Group0"，"Group1"等).这将返回一个数组，并且第一个元素(索引为0)是所有元素的数组:

Start by creating a selection of all elements with class nv-series. This class represents a single group in the legend, holding both the circle symbol and the text (in your case 'Group0', 'Group1' etc). This returns an array, and the first element (index 0) is an array of all the elements:

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

接下来，使用Array.forEach()函数迭代此数组，并为每个元素用适当的符号替换circle元素，使填充颜色与已删除的圆圈相匹配.

Next, use the Array.forEach() function to iterate over this array, and for each element, replace the circle element with the appropriate symbol, matching the fill color to the circle that was removed.

为此，您还需要重用您之前制作的符号列表，并对其进行迭代，以便为每个组分配正确的符号.这是实现此目的的一种方法，尽管也许您可以想到一种更简单的方法:

In order to do this you also need to reuse the list of symbols that you made earlier, and iterate through them as well so that the correct symbol is assigned to each group. Here is one way to accomplish that, though perhaps you can think of an easier way:

// 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 .

Here is the updated JSFiddle.

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

我已经仔细研究了nvd3代码库，并且有一种更简单的方法来激活图例符号，使其在停用时取消填充.它可以简单地以css为目标，因为禁用该系列后，该系列将被赋予disabled类.

I've been going through the nvd3 codebase a bit, and there's a much simpler way to trigger the legend symbol to unfill when it is deactivated. It can simply be targeted in your css, since the series is given a class of disabled when it is disabled.

如果添加以下CSS ...

If you add the following css...

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

...然后，您可以删除所有骇人听闻的JavaScript点击处理.它更清洁，实际上是使用默认圆形元素时他们处理它的方式.

...then you can remove all of the hacky JavaScript click handling. It's much cleaner, and it's actually the way they handle it when using the default circle element.

这是更新的> JSFiddle .

Here's the updated JSFiddle.

这篇关于无法更改图例符号nvd3气泡图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！