用D3创建可点击的图例

我试图用D3创建一个多线图，但是我一直在关闭切换线的可见性。到目前为止，只有一条线，尽管我试图将其全部弄清楚（对此仍然有一些初学者），但我无法看到这个图例出现，所以我无法测试它是否会真的出现摆脱线。下面是JavaScript代码：用D3创建可点击的图例

var BlackBird = [{ 
    "population": "100", 
    "year": "1970" 
}, { 
"population": "100.8", 
    "year": "1971" 
}, { 
"population": "103.5", 
    "year": "1972" 
}, { 
"population": "95.6", 
    "year": "1973" 
}, { 
"population": "101.7", 
    "year": "1974" 
}, { 
"population": "102", 
    "year": "1975" 
} 
]; 

var vis = d3.select("#visualisation"), 
    WIDTH = 1110, 
    HEIGHT = 580, 
    MARGINS = { 
     top: 30, 
     right: 20, 
     bottom: 20, 
     left: 50 
    }, 

xScale = d3.scale.linear() 
    .range([MARGINS.left, WIDTH - MARGINS.right]) 
    .domain([1970,2008]), 

yScale = d3.scale.linear() 
    .range([HEIGHT - MARGINS.top, MARGINS.bottom]) 
    .domain([0,300]), 

xAxis = d3.svg.axis() 
    .scale(xScale) 
    .ticks(25) 
    .tickFormat(d3.format('0f')), 

yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .ticks(12); 

vis.append("svg:g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
    .call(xAxis); 

vis.append("svg:g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
    .call(yAxis); 

var lineGen = d3.svg.line() 
    .x(function(d) { 
     return xScale(d.year); 
    }) 
    .y(function(d) { 
     return yScale(d.population); 
    }) 

    .interpolate("basis"); 

vis.append('path') 
    .attr('d', lineGen(BlackBird)) 
    .attr('stroke-width', 5) 
    .attr('fill', 'none') 
    .attr('opacity', '0.2') 
    .attr("id", "aline"); 

vis.append("text") 
    .attr("x", WIDTH + MARGINS.left +10)    
    .attr("y", 10)  
    .attr("class", "legend") 
    .style("fill", "steelblue")   
    .on("click", function(){ 
     var active = aline.active ? false : true, 
     newOpacity = active ? 0 : 1; 
     d3.select("#aline").attr("opacity", newOpacity); 
     aline.active = active; 
    }) 
    .text("Blue Line");

HTML：

<!DOCTYPE html> <html lang= "en"> <head> <meta charset="UTF-8"> <title>D3 Birds</title> <link rel="stylesheet" href="D3Bird2.css"> </head> <body> <svg id="visualisation" width="1140" height="600"></svg> <div id ="BlaBird"> <img src="Blackbird.png" alt="A Blackbird" class= "Birdie"> </div> <script src="d3.min.js" charset="utf-8"> </script> <script src="script2.js" charset="utf-8"></script> </body> </html>

CSS：

.axis path { 
    fill: none; 
    stroke: #777; 
    shape-rendering: crispEdges; 
} 
.axis text { 
    font-family: Lato; 
    font-size: 13px; 
} 
#aline { 
    stroke: #000; 
    opacity: 0.5; 
    transition: 0.5s; 
} 
#aline: hover { 
    opacity: 1; 
    transition: 0.5s; 
} 
.Birdie { 
    transition: 0.5s; 
    opacity: 0.5; 
} 
#BlaBird { 
    position: absolute; 
    left: 1150px; 
    top: 30px; 
} 
.legend { 
    font-size: 16px; 
    font-weight: bold; 
    text-anchor: start; 
}

来源

2015-04-01 dogtorwho

你见过NVD3吗？它已经有了[这个]（http://nvd3.org/examples/line.html）。 – 2015-04-01 12:30:35

您的图例中有一些命名错误的变量。 svg = vis？宽度=宽度？保证金= MARGINS？ – Mark 2015-04-01 12:35:57

啊！我没有发现错误的拼写！谢谢！ :) 虽然，问题没有解决！ D：看了几个例子，似乎无法让它起作用！ – dogtorwho 2015-04-01 12:46:48

首先，你没有包含HTML标记，但我假设#visualisation是SVG元素。确保你已经分配了它的高度和宽度属性。

其次，您不会为您的线指定颜色stroke。我假设你在CSS中执行此操作。

三，固定你的变量名，该行后：

.attr("x", width + margin.left +10)

的问题。这会将文本元素推到SVG之外。

这里是一个example我已经解决了这一点。

看你的CSS编辑后

新的问题。您正在设置属性代码中的不透明度，CSS设置样式不透明度。当两者都设置时，浏览器将使用该样式。因此，将您的点击处理程序更改为：

.on("click", function() { 
    var active = aline.active ? false : true, 
     newOpacity = active ? 0 : 1; 
    d3.select("#aline").style("opacity", newOpacity); //<-- set style, not attr 
    aline.active = active; 
    })

示例updated。

来源

2015-04-01 14:51:23 Mark

这似乎是100％的答案！：D我可以看到它也可以工作，但它仍然不想在我的工作！ xx我还会添加其他代码位，以防万一有错误发生在某个地方：（在接下来的评论中！） – dogtorwho 2015-04-01 15:17:08

<！DOCTYPE html> D3鸟 <链路的rel = “样式表的” href = “D3Bird2.css”> \t \t

– dogtorwho 2015-04-01 15:17:20

.axis路径{ 填充：无; 行程：＃777; 形状渲染：crispEdges; } .axis文本{ 字体家庭：拉托; 字体大小：13像素; } #aline { 行程：＃000; 不透明度：0.5; \t过渡：0.5秒; } #aline ：悬停{不透明度：1; \t转换：0.5s; } .Birdie { \t transition：0.5s; \t不透明度：0.5; } #BlaBird { position：absolute; left：1150px; top：30px; } .legend { font-size：16px; font-weight：bold; text-anchor：start; }（还要补充第一个回复是HTML，而这个是CSS！:)） – dogtorwho 2015-04-01 15:18:08

用D3创建可点击的图例

回答

相关问题