用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創建可點擊的圖例

回答

相關問題