我被要求向我的多线图表添加交互式图例。我的多线图表有一个带有两个键的嵌套,这给我的图例带来了困难。这是一个旧的EAMPLE我用于添加交互式图例。
我的问题:
1)我试图显示图例的顶级键,以便它显示system01、system02、system03等,而不是一起显示两个键。例如,system01 0
和 systmem01 2
变为 system01
,因此当单击它时,它将隐藏这两行。
2) 将线条设置为非事件状态后,将鼠标悬停在图表上时仍会显示工具提示。
这是我的 FIDDLE
添加图例的片段:
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);
});
最佳答案
看看这个:https://jsfiddle.net/mkwne5uh/
对于 2) 一个简单的解决方案是跟踪隐藏并有条件地应用鼠标悬停和鼠标移出。
// 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])
但我不太确定这是否是最好的解决方案。
希望这有帮助,祝你好运!
关于javascript - D3 多折线图互动图例问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44448700/