Question

我已经获得了this d3js v3图表，并想知道是否可以将文本格式的值附加到条形图和圆环图中，如果是这样，您是怎么做的会去做吗？

以下是代码：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
body {
  font-family:arial;
  font-size:10px;
  margin:auto;
  width:1100px;
}

.axis text {
  font: 10px sans-serif;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
select {
    background-color: #fff;
    border: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    margin: 2px 2px;
    cursor: pointer;
}
select:focus {outline:0;}
.Row
{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.Column
{
    display: table-cell;
    position:relative;
}
</style>
</head>
<body>
<div class="Row">
<div class="Column" id="chart"></div>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var dispatch = d3.dispatch("load", "statechange");

var groups = [
  "Team 1",
  "Team 2",
  "Team 3"
];

d3.csv("data.csv", type, function(error, states) {
  if (error) throw error;
  var stateById = d3.map();

  states.forEach(function(d) { stateById.set(d.id, d); });
  dispatch.load(stateById);
  dispatch.statechange(stateById.get("CA"));
});

// A drop-down menu for selecting a state; uses the "menu" namespace.
dispatch.on("load.menu", function(stateById) {
  var select = d3.select("#chart")
    .append("div")
    .append("select")
      .on("change", function() { dispatch.statechange(stateById.get(this.value)); });

  select.selectAll("option")
      .data(stateById.values())
    .enter().append("option")
      .attr("value", function(d) { return d.id; })
      .text(function(d) { return d.id; });

  dispatch.on("statechange.menu", function(state) {
    select.property("value", state.id);
  });
});

// A bar chart to show total population; uses the "bar" namespace.
dispatch.on("load.bar", function(stateById) {
  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 80 - margin.left - margin.right,
      height = 290 - margin.top - margin.bottom;

  var y = d3.scale.linear()
      .domain([0, d3.max(stateById.values(), function(d) { return d.total; })])
      .rangeRound([height, 0])
      .nice();

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickFormat(d3.format(".2s"));

  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", "y axis")
      .call(yAxis);

  var rect = svg.append("rect")
      .attr("x", 4)
      .attr("width", width - 4)
      .attr("y", height)
      .attr("height", 0)
      .style("fill", "#aaa");

  dispatch.on("statechange.bar", function(d) {
    rect.transition()
        .attr("y", y(d.total))
        .attr("height", y(0) - y(d.total));
  });
});

// A pie chart to show population by age group; uses the "pie" namespace.
dispatch.on("load.pie", function(stateById) {
  var width = 260,
      height = 300,
      radius = Math.min(width, height) / 2;

  var color = d3.scale.ordinal()
      .domain(groups)
      .range(["steelblue", "lightblue", "darkorange"]);

  var arc = d3.svg.arc()
      .outerRadius(radius - 10)
      .innerRadius(radius - 60);

  var pie = d3.layout.pie()
      .sort(null);

  var svg = d3.select("#chart").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var path = svg.selectAll("path")
      .data(groups)
    .enter().append("path")
      .style("fill", color)
      .each(function() { this._current = {startAngle: 0, endAngle: 0}; });

  dispatch.on("statechange.pie", function(d) {
    path.data(pie.value(function(g) { return d[g]; })(groups)).transition()
        .attrTween("d", function(d) {
          var interpolate = d3.interpolate(this._current, d);
          this._current = interpolate(0);
          return function(t) {
            return arc(interpolate(t));
          };
        });
  });
});

// Coerce population counts to numbers and compute total per state.
function type(d) {
  d.total = d3.sum(groups, function(k) { return d[k] = +d[k]; });
  return d;
}

</script>
</body>
</html>

这是数据集：

id,Team 1,Team 2,Team 3
AL,3105,5523,2590
AK,5208,8564,4215
AZ,5159,8286,3626
AR,2020,3432,1572
CA,2704,4499,2159
CO,3582,5871,2617
CT,2116,4036,1969
DE,5931,9949,4741
DC,3635,5043,2522
FL,1140,1938,9250
GA,7405,1250,5578
HI,8720,1340,6401

Answer 1

您必须创建标签：

var label = svg.append("text")
  .attr("x", 4)
  .attr("y", height)
  .attr("dy", ".35em")
  .text(function(d) { return "0"; });

然后在此新文本上添加转换

label.transition()
    .attr("y", y(d.total) + 5)
    .text(d.total);

请参阅https://plnkr.co/edit/wtq96BAZ3Zh1SaczjLT6?p=preview

如何将文本附加到d3js调度图表

1 个答案: