Question

我有一个由嵌套数据制作的折线图。用户可以选择要绘制的键。每个键值都有4个与之关联的子值。每个键都具有相同的子值名称。每个子值都有它自己的行。因此，如果用户选择要绘制的2个键，则图形上将显示8行。 4个用于一个键，4个用于另一个键。

我制作了一个图例，显示了孩子的名字和它的模式。我希望能够在图例中单击子值的名称，并且具有该名称的所有子值都将被隐藏，即使它们具有不同的键。

这是我嵌套的方式：

var servers = d3.nest()
    .key(function (d) { return d.serverName; })
    .entries(data)

我如何定义行：

var lineGen = d3.svg.line()
.x(function (d) {
    return x(timeFormat.parse(d.metricDate));
})
.y(function (d) {
    return y(d.ServerLogon);
})
.interpolate("linear")


var lineGen2 = d3.svg.line()
.x(function (d) {
    return x(timeFormat.parse(d.metricDate));
})
.y(function (d) {
    return y1(d.Processor);
})
.interpolate("linear");


var lineGen3 = d3.svg.line()
.x(function (d) {
    return x(timeFormat.parse(d.metricDate));
})
.y(function (d) {
    return y2(d.AdminLogon);
})
.interpolate("linear");


var lineGen4 = d3.svg.line()
.x(function (d) {
    return x(timeFormat.parse(d.metricDate));
})
.y(function (d) {
    return y3(d.ServerExport);
})
.interpolate("linear");

我如何为图例附加线条，文字和线条图案：

servers.forEach(function (d, i) {
    visObjectLoc.append("svg:path")
        .attr("class", "line")
        .attr("fill", "none")
        .attr("stroke-dasharray", ("15, 3"))
        .attr("d", lineGen2(d.values))
        .attr("id", "Processor")
        .style("stroke", function () {
            return d.color = color(d.key);
        });


    visObjectLoc.append("text")
    .attr("x", WIDTH / 4)
    .attr("y", 34)
    .style("text-anchor", "middle")
    .style("font-size", "18px")
    .text("Processor")
    .on("click", function () {
        var active = d.active ? false : true,
        newOpacity = active ? 0 : 1;
        d3.select("#Processor")
            .transition().duration(100)
            .style("opacity", newOpacity);
        d.active = active;
    });

    visObjectLoc.append("line")
        .attr("x1", 455)
        .attr("x2", 370)
        .attr("y1", 44)
        .attr("y2", 44)
        .attr("stroke-width", 2)
        .attr("stroke", "black")
        .attr("stroke-dasharray", ("15, 3"))
});

到目前为止，onClicks只隐藏了第一个键的子行。我尝试为每个服务器提供相同ID的每个子行。我认为我没有正确地循环键，或者每条线都没有获得所需的ID。任何建议都欢迎和赞赏。

Answer 1

ID是唯一的。如果你想选择一组东西，给他们一个班级。如果您可以将项目放在JSFiddle中，我可以测试它，但它可能就像通过以下方式更改servers.forEach(...中的行一样简单：

.attr("id", "Processor")

到

.attr("class", "Processor")

然后在onClick回调中：

d3.selectAll(".Processor")
        .transition().duration(100)
        .style("opacity", newOpacity);
        ...

D3.js互动传奇切换

1 个答案: