Question

我正在整理一个水平条形图，但是我正在努力在该系列上附加标签-我已经更换了乐队-但是我不确定这里缺少什么-当我试图让标签显示时，图表本身会中断

https://bl.ocks.org/caravinden/eb0e5a2b38c8815919290fa838c6b63b

$(document).ready(function() {
  var $this = $('.horizontalbarchart');


  var data = [{
      label: 'Gummi Bears',
      value: 20,
    },
    {
      label: 'Butterfinger',
      value: 5,
    },
    {
      label: 'Sour Patch Kids',
      value: 30,
    },
    {
      label: 'Almond Joy',
      value: 40,
    },
  ];

  var width = $this.data('width'),
    height = $this.data('height');

  var color = d3.scaleOrdinal()
    .range(["#eb6383", "#fa9191", "#ffe9c5", "#b4f2e1"]);

  data.forEach(function(d) {
    d.total = +d.value;
  });

  var margin = {
      top: 20,
      right: 5,
      bottom: 30,
      left: 20
    },
    width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

  var x = d3.scaleLinear()
    .range([0, width]);
  var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.1);

  x.domain([0, d3.max(data, function(d) {
    return d.value;
  })]);
  y.domain(data.map(function(d) {
    return d.total;
  }));

  var svg = d3.select($this[0])
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr('class', 'barchart')
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var bars = svg.append('g').attr('class', 'bars');

  bars.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr('fill', function(d, i) {
      return color(i);
    })
    .attr("width", function(d) {
      return x(d.total);
    })
    .attr("y", function(d) {
      return y(d.value);
    })
    .attr("height", y.bandwidth());

  bars.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  bars.append("g")
    .call(d3.axisLeft(y));
});

body {
  background: #eeeeee;
}

#holder {
  overflow: hidden;
}

.piechart {
  border: 1px solid black;
}

.piechartchart path {
  stroke: #cccccc;
  stroke-width: 1px;
  opacity: 0.8;
}

.piechartchart text {
  font-size: 12px;
}

.legend rect {
  fill: white;
  opacity: 0.8;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v4.min.js"></script>
<div id="holder">
  <div class="horizontalbarchart" data-role="horizontalbarchart" data-width=350 data-height=350></div>
</div>

Answer 1

请考虑以下内容。就像附加条形图一样，您还为每个值附加一个text元素。然后，使用x()和y()定位它们，并使用.text()

给它们赋值

$(document).ready(function() {
  var $this = $('.horizontalbarchart');


  var data = [{
      label: 'Gummi Bears',
      value: 20,
    },
    {
      label: 'Butterfinger',
      value: 5,
    },
    {
      label: 'Sour Patch Kids',
      value: 30,
    },
    {
      label: 'Almond Joy',
      value: 40,
    },
  ];

  var width = $this.data('width'),
    height = $this.data('height');

  var color = d3.scaleOrdinal()
    .range(["#eb6383", "#fa9191", "#ffe9c5", "#b4f2e1"]);

  data.forEach(function(d) {
    d.total = +d.value;
  });

  var margin = {
      top: 20,
      right: 5,
      bottom: 30,
      left: 80
    },
    width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;

  var x = d3.scaleLinear()
    .range([0, width]);
  var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.1);

  x.domain([0, d3.max(data, function(d) {
    return d.value;
  })]);
  y.domain(data.map(function(d) {
    return d.label;
  }));

  var svg = d3.select($this[0])
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr('class', 'barchart')
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var bars = svg.append('g').attr('class', 'bars');

  bars.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr('fill', function(d, i) {
      return color(i);
    })
    .attr("width", function(d) {
      return x(d.total);
    })
    .attr("y", function(d) {
      return y(d.label);
    })
    .attr("height", y.bandwidth());

  bars.selectAll(".label")
    .data(data)
    .enter().append("text")
    .attr("class", "label")
    .attr('text-anchor', function(d) {
      return d.total < 20 ? 'start' : 'end';
    })
    .attr("x", function(d) {
      return d.total < 20 ? x(d.total) + 10 : x(d.total) - 10;
    })
    .attr("y", function(d) {
      return y(d.label) + y.bandwidth() / 2;
    })
    .attr("dy", 5)
    .text(function(d) {
      return d.label;
    });

  bars.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  bars.append("g")
    .call(d3.axisLeft(y));
});

body {
  background: #eeeeee;
}

#holder {
  overflow: hidden;
}

.piechart {
  border: 1px solid black;
}

.piechartchart path {
  stroke: #cccccc;
  stroke-width: 1px;
  opacity: 0.8;
}

.piechartchart text {
  font-size: 12px;
}

.legend rect {
  fill: white;
  opacity: 0.8;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v4.min.js"></script>
<div id="holder">
  <div class="horizontalbarchart" data-role="horizontalbarchart" data-width=550 data-height=350></div>
</div>

d3v4-水平图-标签

1 个答案: