Question

我似乎无法让Bars系列出现在我的图表上的图例中。两个折线图都显示在图例确定中。我有JSFiddle here。

然后我希望允许用户点击单个图例并让这些线条/条形图从图表中显示/消失作为转换，但除了NVD3.js之外没有找到任何其他示例，我不想要使用。你能否指出一个你可能知道的例子，以便我可以从中学习。

请先点击“创建图表”按钮，这样就可以看到生成的图表了。

HTML代码是：

<input id="clickMe1" type="button" value="Create Chart" onclick='createMainPerfChart()' />
<input id="clickMe2" type="button" value="Update Chart" onclick='updateMainPerfChart()' />
<div id="msg"></div>
<div style="margin-top:120px;">
    <svg id="mainchart"></svg>
</div>

谢谢！

Answer 1

您需要为此修改图例的实现。具体来说，您需要附加一个单击处理程序，该处理程序根据单击的圆圈淡出条形和另一条线。以下代码实现了这一点。

.on("click", function(d) {
                var op = d.hidden ? 1 : 0;
                d3.selectAll("rect.bar").transition().attr("opacity", op);
                if(d.key == "Cumulative Output") {
                    d3.select("path.TGTLine").transition().attr("opacity", op);
                } else {
                    d3.select("path.CABLine").transition().attr("opacity", op);
                }
                d.hidden = !d.hidden;
            });

我将当前状态存储在.hidden这里，以了解是淡入还是淡出。完整示例here。

D3图表图例，条形图未显示

1 个答案: