如何用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添加数字到酒吧？

回答

相关问题