如何用D3.js添加數字到酒吧？

我創建了一個圖表，它工作正常，但我無法找到如何將數字添加到列。數字只有在我懸停列時纔會出現。嘗試不同的變體：如何用D3.js添加數字到酒吧？

svg.selectAll("text"). 
data(data). 
enter(). 
append("svg:text"). 
attr("x", function(datum, index) { return x(index) + barWidth; }). 
attr("y", function(datum) { return height - y(datum.days); }). 
attr("dx", -barWidth/2). 
attr("dy", "1.2em"). 
attr("text-anchor", "middle"). 
text(function(datum) { return datum.days;}). 
attr("fill", "white");

鏈接到我的例子：https://jsfiddle.net/rinatoptimus/db98bzyk/5/

來源

2016-12-26 rinatoptimus

查看幾個教程：http://cagrimmett.com/til/2016/04/26/responsive-d3-bar-chart.html，http://alignedleft.com/tutorials/d3/making-a-條形圖 – rinatoptimus

備用想法@gerardofurtado是不是一個rect追加g，然後將文本分組在一起。這可以防止需要進行雙重數據綁定。

var bars = svg.selectAll(".bar") 
    .data(newData) 
    .enter().append("g") 
    .attr("class", "bar") 
    // this might be affected: 
    .attr("transform", function(d, i) { 
    return "translate(" + i * barWidth + ",0)"; 
    }); 

bars.append("rect") 
    .attr("y", function(d) { 
    return y(d.days); 
    }) 
    .attr("height", function(d) { 
    return height - y(d.days) + 1; 
    }) 
    .style({ 
    fill: randomColor 
    }) // color bars 
    .attr("width", barWidth - 1) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide); 

bars.append("text") 
    .text(function(d) { 
    return d.days; 
    }) 
    .attr("y", function(d) { 
    return y(d.days); 
    }) 
    .attr("x", barWidth/2) 
    .style("text-anchor", "middle");

更新fiddle。

來源

2016-12-26 14:31:21 Mark

謝謝，馬克！不幸的是，我不能接受這兩個答案作爲正確的變體，但你的答案是非常有用的！ – rinatoptimus

@ user3601990接受Mark的回答。這是最好的。我沒有使用團體編寫它，因爲我太懶惰了，但這是最好的方式，它使用更少的代碼併爲您提供更多的靈活性。 –

馬克，如何解決這個問題：如果切換廣播btns列移開？ – rinatoptimus

當你這樣做：

svg.selectAll("text")

您選擇已在您的SVG存在文本元素。在輸入選擇，重要的是選擇一些不存在：

svg.selectAll(".text") 
    .data(newData) 
    .enter() 
    .append("svg:text") 
    .attr("x", function(datum) { 
     return x(datum.name) + x.rangeBand()/2 
    }) 
    .attr("y", function(datum) { 
     return y(datum.days) - 10; 
    }) 
    .attr("text-anchor", "middle") 
    .text(function(datum) { 
     return datum.days; 
    }) 
    .attr("fill", "white");

這裏是你的提琴：https://jsfiddle.net/c210osht/

來源

2016-12-26 14:28:31

Stackoverflow需要一種方法來設置一個關於誰已經在回答問題的過程中的標誌，這種方式你和我不會繼續這樣做:) – Mark

謝謝你，赫拉爾多！有用！ – rinatoptimus

@Mark確實，讓我們建議在「Meta」上......他們會在6到8周內實施它（http://meta.stackexchange.com/a/19514） –

您可以嘗試使用d3fc bar series component，它允許您通過decorate pattern添加數據標籤。

下面的代碼是什麼樣子：

var svgBar = fc.seriesSvgBar() 
    .xScale(xScale) 
    .yScale(yScale) 
    .crossValue(function(_, i) { return i; }) 
    .mainValue(function(d) { return d; }) 
    .decorate(function(selection) { 
     selection.enter() 
     .append("text") 
     .style("text-anchor", "middle") 
     .attr("transform", "translate(0, -10)") 
     .text(function(d) { return d3.format(".2f")(d); }) 
     .attr("fill", "black"); 
    });

這裏有一個codepen with the complete example。

披露：我是d3fc項目的核心貢獻者！

來源

2016-12-27 09:02:39 ColinE

如何用D3.js添加數字到酒吧？

回答

相關問題