Javascript D3关于多折线图问题的交互式图例

我被要求在我的多折线图中添加一个交互式图例。我的多折线图有一个有两个键的巢，这让我的传奇很难实现。这是我用来添加交互式图例的一个旧版本

我的问题：

var chartBody = svg.append("g")
    .attr("class", "chartbody")
    .attr("clip-path", "url(#clip)");

for (var key in storages) {
    if (storages.hasOwnProperty(key)) {
        console.log("key:", key, [storages[key]]);
        var capSeries = d3.line()
            .x(function(d) {
                return x(d.date); })
            .y(function(d) {
                return y(d.availableVolumeCapacity); })
            .curve(d3.curveCardinal);
        // mapping of data to line using the capSeries function
        chartBody.append("path")
            .data([storages[key]])
            .attr("class", "line")
            .attr("id", 'tag'+ key.replace(/\s+/g, ''))
            .attr("d", capSeries)
            .style("stroke", z(key));
    }
}

// spacing for the legend
legendSpace = width/nest.length;

// Loop through each symbol / key
nest.forEach(function(d,i) {

// Add the Legend
    svg.append("text")
        .attr("x", (legendSpace/2)+i*legendSpace)  // space legend
        .attr("y", height + (margin.bottom/2)+ 5)
        .attr("class", "legend")    // style the legend
        .style("fill", function() { // Add the colours dynamically
            return d.z = z(d.key); })
        .on("click", function(){
            // Determine if current line is visible
            var active = d.active ? false : true,
            newOpacity = active ? 0 : 1;
            // Hide or show the elements based on the ID
            d3.select("#tag"+d.key.replace(/\s+/g, ''))
                .transition().duration(100)
                .style("opacity", newOpacity);
            // Update whether or not the elements are active
            d.active = active;
            })
        .text(d.key);

});

1） 我试图显示图例的顶级键，以便它显示system01、system02、system03等，而不是同时显示这两个键。例如，

system01 0

和

sysmem01 2

将变成

system01

，因此单击它时将隐藏这两行

2） 使线处于非活动状态后，将鼠标悬停在图表上时仍会显示工具提示

这是我的

用于添加图例的代码段：

var chartBody = svg.append("g")
    .attr("class", "chartbody")
    .attr("clip-path", "url(#clip)");

for (var key in storages) {
    if (storages.hasOwnProperty(key)) {
        console.log("key:", key, [storages[key]]);
        var capSeries = d3.line()
            .x(function(d) {
                return x(d.date); })
            .y(function(d) {
                return y(d.availableVolumeCapacity); })
            .curve(d3.curveCardinal);
        // mapping of data to line using the capSeries function
        chartBody.append("path")
            .data([storages[key]])
            .attr("class", "line")
            .attr("id", 'tag'+ key.replace(/\s+/g, ''))
            .attr("d", capSeries)
            .style("stroke", z(key));
    }
}

// spacing for the legend
legendSpace = width/nest.length;

// Loop through each symbol / key
nest.forEach(function(d,i) {

// Add the Legend
    svg.append("text")
        .attr("x", (legendSpace/2)+i*legendSpace)  // space legend
        .attr("y", height + (margin.bottom/2)+ 5)
        .attr("class", "legend")    // style the legend
        .style("fill", function() { // Add the colours dynamically
            return d.z = z(d.key); })
        .on("click", function(){
            // Determine if current line is visible
            var active = d.active ? false : true,
            newOpacity = active ? 0 : 1;
            // Hide or show the elements based on the ID
            d3.select("#tag"+d.key.replace(/\s+/g, ''))
                .transition().duration(100)
                .style("opacity", newOpacity);
            // Update whether or not the elements are active
            d.active = active;
            })
        .text(d.key);

});

看看这个：

第2页） 一个简单的解决方案是跟踪隐藏的，并有条件地应用mouseover和mouseout

// define an array to hold the hidden info
var hidden = [];
...
...
 // Loop through each symbol / key
    nest.forEach(function(d,i) {

    // Add the Legend
        svg.append("text")
            .attr("x", (legendSpace/2)+i*legendSpace)  // space legend
            .attr("y", height + (margin.bottom/2)+ 5)
            .attr("class", "legend")    // style the legend
            .style("fill", function() { // Add the colours dynamically
                return d.z = z(d.key); })
            .on("click", function(){

                // Update whether or not the elements are active
                // initial d.active will be undefined, so on first click
                // d.active will become false like this
                d.active = !d.active;  
                // Determine if current line is visible
                newOpacity = d.active ? 0 : 1;

                // if category is not active now, remove it
                if(!d.active){
                    hidden.splice(hidden.indexOf(d.key), 1);
                }
                else{// keep it for use later on
                    hidden.push(d.key)
                }
                // Hide or show the elements based on the ID
                d3.select("#tag"+d.key.replace(/\s+/g, ''))
                    .transition().duration(100)
                    .style("opacity", newOpacity);
                })
            .text(d.key);
    });

然后：

function mouseover(d) {
    if( hidden.indexOf(d.data.storageSystem + " " + d.data.poolId)> -1) return;
....
function mouseout(d) {
        if( hidden.indexOf(d.data.storageSystem + " " + d.data.poolId)> -1) return;

至于1）您可以使用

.text（d.key.split（“”[0]）

，但我不确定这是否是最好的解决方案

---

希望这有帮助，祝你好运

我已经解决了你的第二个问题，不理解第一个问题，我很抱歉没有解释清楚。我希望为图例分组子键。例如

system01 0

和

systemmem01 2

变成

system01

，因此当单击它时，它将隐藏两行。@Clarkus978您只需更改显示的文本，它就可以正常工作，请查看我的answer@mkaran谢谢你的回答，但这并不能解决问题。我希望对

system01 0

和

system01 02

进行分组，以便在图例中只显示一个

system01

。当点击

system01

时，它将隐藏行

system01 0

和

system01 2

@Clarkus978哦，我明白了！谢谢你的澄清