d3.js - d3 水平条形图，背景为 100%

Question

我有这个单一水平条形图，我想进行以下调整:

1. 将刻度值显示在条形图的右侧，而不是轴旁边。
2. 显示条形图刻度的背景，而不是左轴和下轴。

当前版本:

我想要达到的目标:

JS

var data = [
      {"yAxis":"score", "xAxis":"72"}
    ];          
    // set the dimensions and margins of the graph
    var margin = {top: 20, right: 20, bottom: 30, left: 80},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;          
    // set the ranges
    var y = d3.scaleBand()
    .range([height, 0])
    .padding(0.4);
    var x = d3.scaleLinear()
    .range([0, width]);          
    var svg = d3.select(".barChartContainer").append("svg")          
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "0 0 960 500")
    .append("g")
    .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");        
    // Scale the range of the data in the domains
    x.domain([0, d3.max(data, function(d){ return d.xAxis; })])
    y.domain(data.map(function(d) { return d.yAxis; }));        
    //y.domain([0, d3.max(data, function(d) { return d.prereqs; })]);
    // append the rectangles for the bar chart
    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")          
    .attr("y", function(d) { return y(d.yAxis); })
    .attr("height", y.bandwidth())
    .transition()
    .duration(1000)
    .delay(function(d, i) {
    return i * 100
    })
    .attr("width", function(d) {return x(d.xAxis); } );
    // add the x Axis
    svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickValues(d3.range(x.domain()[0], x.domain()[1] + 1, 1))
    .tickFormat(d3.format("d"))
    );
    svg.append("g")
    .attr("class", "yAxis")
    .call(d3.axisLeft(y));

我从 codepen 获得了这段代码，我一直在尝试修改它，但它已经被破坏了，所以我停下来，希望你能提供帮助。

谢谢。

Answer 1

要显示条形的背景，只需复制您的选择并为矩形选择 100% 的值，并采用浅灰色填充:

var backgroundBar = svg.selectAll(null)
    .data(data)
    .enter()
    .append("rect")
    //etc...
    .attr("width", function(d) {
        return x(100);
    });

当然，您必须更改 x 比例的范围:

var x = d3.scaleLinear()
    .domain([0, 100]);

然后，放下两个轴并使用文本选择打印标签。

最后，使用另一个文本选择作为值:

var values = svg.selectAll(null)
    .data(data)
    .enter()
    .append("text")
    //etc...
    .text(function(d) {
        return +d.xAxis
    })

如果需要，您可以补间文本:

.attrTween("text", function(d) {
    var self = this
    var i = d3.interpolateNumber(0, +d.xAxis);
    return function(t) {
        return d3.select(self).text(~~i(t));
    }
});

这是结果:

var data = [{
  "yAxis": "score",
  "xAxis": "72"
}];

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

var y = d3.scaleBand()
  .range([height, 0])
  .padding(0.4);

var x = d3.scaleLinear()
  .range([0, width])
  .domain([0, 100]);

var svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 200)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

y.domain(data.map(function(d) {
  return d.yAxis;
}));

var backgroundBar = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("fill", "lightgray")
  .attr("y", function(d) {
    return y(d.yAxis);
  })
  .attr("height", y.bandwidth())
  .attr("width", function(d) {
    return x(100);
  });

var bar = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("y", function(d) {
    return y(d.yAxis);
  })
  .attr("height", y.bandwidth())
  .transition()
  .duration(2000)
  .delay(function(d, i) {
    return i * 100
  })
  .attr("width", function(d) {
    return x(d.xAxis);
  });

var labels = svg.selectAll(null)
  .data(data)
  .enter()
  .append("text")
  .attr("y", function(d) {
    return y(d.yAxis) + y.bandwidth() / 2;
  })
  .attr("x", -10)
  .attr("text-anchor", "end")
  .text(function(d) {
    return d.yAxis
  });

var values = svg.selectAll(null)
  .data(data)
  .enter()
  .append("text")
  .attr("y", function(d) {
    return y(d.yAxis) + y.bandwidth() / 2;
  })
  .attr("x", 10)
  .text(function(d) {
    return +d.xAxis
  })
  .transition()
  .duration(2000)
  .delay(function(d, i) {
    return i * 100
  })
  .attr("x", function(d) {
    return x(d.xAxis) + 10;
  })
  .attrTween("text", function(d) {
    var self = this
    var i = d3.interpolateNumber(0, +d.xAxis);
    return function(t) {
      return d3.select(self).text(~~i(t));
    }
  });

<script src="https://d3js.org/d3.v4.min.js"></script>