使用d3js在条形图上显示值

时间:2014-10-21 09:01:55

标签: d3.js

我想在栏上显示值!使用此代码,它显示值,但值被移动...

截图: http://www.imgbox.de/users/public/images/DbD1jLKgnR.png

我想要超过或在栏中的值!

var state2 = chart2.selectAll(".state")
  .data(data)
.enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

state2.selectAll("rect")
  .data(function(d) { return d.ages; })
  .enter().append("rect")
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.y1); })
  .attr("height", function(d) { return y(d.y0) - y(d.y1); })
  .style("fill", function(d) { return color(d.name); })
  .filter(function(d) { return d.name !== ""; }).call(d3.helper.tooltip()

            .attr({class: 'tooltip2'})
            .text(function(d, i){ return d.name + ': '+ (-((d.y0) - (d.y1))) ; })
        );

state2.selectAll("text.rect")
  .data(function(d) { return d.ages; })
  .enter().append("text")
  .attr("class", "rect")
  .attr("text-anchor", "start")
  .attr("x", function(d) { return x(d.name) + x.rangeBand()/2; })
  .filter(function(d) { return d.name !== ""; }).filter(function(d) { return ((d.y0) - (d.y1))     !== 0; }).attr("y", function(d) { return (-((d.y0) - (d.y1))*8); })
  .filter(function(d) { return d.name !== ""; }) .filter(function(d) { return ((d.y0) - (d.y1)) !== 0; }).text(function(d) { return (-((d.y0) - (d.y1))); });

0 个答案:

没有答案