javascript - 在条形图 d3js 旁边添加计数

Question

我正在尝试在每个条形图旁边添加计数(条形图的值)，但计数不可见。我试图为文本添加不透明度甚至 z 索引以检查它是否被条重叠，但它没有帮助。在检查元素时，我知道标签包含在其中，这是导致问题的原因，任何人都可以指导我，以便我可以更正我的代码。

是否可以在刷新数据时更新值？

代码如下:jsfiddle link

datasetOption1 = [{
  label: "10-20",
  value: 22,
  count: 22
}, {
  label: "20-30",
  value: 33,
  count: 33
}, {
  label: "30-40",
  value: 4,
  count: 4
}, {
  label: "40-50",
  value: 15,
  count: 15
}, {
  label: "50-60",
  value: 36,
  count: 36
}];

datasetOption2 = [{
  label: "Category 1",
  value: 10,
  count: 11
}, {
  label: "Category 2",
  value: 20,
  count: 3
}, {
  label: "Category 3",
  value: 30,
  count: 41
}, {
  label: "Category 4",
  value: 5,
  count: 17
}, {
  label: "Category 5",
  value: 12,
  count: 9
}, {
  label: "Category 6",
  value: 23,
  count: 33
}];
var chart = document.getElementById("chart");



var margin = {
    top: 10,
    right: 20,
    bottom: 40,
    left: 50
  },
  width = 400,
  height = 300;


var div = d3.select(chart).append("div").attr("class", "toolTip");

var formatPercent = d3.format("");

var y = d3.scale.ordinal()
  .rangeRoundBands([height, 0], .2, 0.5);

var x = d3.scale.linear()
  .range([0, width - 20]);

var xAxis = d3.svg.axis()
  .scale(x)
  .ticks(6)
  .tickSize(5)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");
//.tickFormat(formatPercent);

var svg = d3.select(chart).append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

d3.select("input[value=\"total\"]").property("checked", true);

function changeAge(dataset) {

  var dataMax = d3.max(dataset, function(d) {
    return d.count;
  });
  y.domain(dataset.map(function(d) {
    return d.label;
  }));
  x.domain([0, (dataMax * 1.4)]);

  scale = d3.scale.linear()
    .domain([0, (dataMax * 1.4)])
    .range([0, width - 40 - 10]);

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + parseInt(height + margin.top + 10) + ")")
    .call(xAxis);

  svg.select(".y.axis").remove();
  svg.select(".x.axis").remove();

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(0)")
    .attr("x", 50)
    .attr("dx", ".1em")
    .style("text-anchor", "end");
  /*  .text("Option %"); */


  var bar = svg.selectAll(".bar")
    .data(dataset, function(d) {
      return d.label;
    });
  // new data:
  bar.enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
      return x(d.count);
    })
    .attr("y", function(d) {
      return y(d.label);
    })
    .attr("width", function(d) {
      return width - x(d.count);
    })
    .attr("height", y.rangeBand());


  //add a value label to the right of each bar
  bar.append("text")
    .attr("class", "label")
    //y position of the label is halfway down the bar
    .attr("y", function(d) {
      return y(d.label) + y.rangeBand() / 2 + 4;
    })
    //x position is 3 pixels to the right of the bar
    .attr("x", function(d) {
      return x(d.count) + 3;
    })
    .text(function(d) {
      return d.count;
    });

  // removed data:
  bar.exit().remove();

  // updated data:
  bar.transition()
    .duration(750)
    .attr("x", function(d) {
      return 0;
    })
    .attr("cx", 0)
    .attr("y", function(d) {
      return y(d.label);
    })
    .attr("width", function(d) {
      return x(d.count);
    })
    .attr("height", y.rangeBand());



}

changeAge(datasetOption1);

$('#btnChange').on('click', function() {

  changeAge(datasetOption2)
})

svg {
  width: 100%;
  height: 350px;
}

.bar {
  fill: rgb(39, 85, 130);
  /* fill: #A18FDB; */
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="chart">

</div>
<button id="btnChange">
change </button>

Answer 1

您正在使用 rect DOM 添加 text DOM，这就是您看不到文本标签的原因。

解决问题:

像这样创建一个组:

  bar.enter().append("g")
    .attr("class", "bar")

将您的 rect 和 text DOM 添加到组中。

最后，对于矩形 DOM 的转换，从组中选择矩形:

bar.selectAll("rect").transition()
.duration(750)
.attr("x", 函数(d) {

工作代码here