D3条形图 - 从右到左的反向条形图

Question

我是D3的新手。我正在研究一个当前的例子。我想要做的是反转条形图，所以所有标签都从图表的末尾开始。我将x坐标更改为宽度，而不是0，并尝试将宽度更改为负宽度。

这是我目前的版本。

我基本上希望所有的酒吧都以100分开始，而不是0分。谢谢！

https://plnkr.co/edit/fqW0i3H3ZACJx1oeViR6?p=preview

  

var svg = d3.select（＆＃34; svg＆＃34;），       margin = {top：20，right：20，bottom：30，left：80}，       width = + svg.attr（＆＃34; width＆＃34;） - margin.left - margin.right，       height = + svg.attr（＆＃34; height＆＃34;） - margin.top - margin.bottom;

     

var tooltip = d3.select（＆＃34; body＆＃34;）。append（＆＃34; div＆＃34;）。attr（＆＃34; class＆＃34;，   ＆＃34;工具提示＆＃34）;

     

var x = d3.scaleLinear（）。range（[0，width]）; var y =   d3.scaleBand（）。range（[height，0]）;

     

var g = svg.append（＆＃34; g＆＃34;）。attr（＆＃34; transform＆＃34;，＆＃34; translate（＆＃34; +   margin.left +＆＃34;，＆＃34; + margin.top +＆＃34;）＆＃34;）;

     

d3.json（＆＃34; data.json＆＃34;，function（error，data）{if（error）throw   误差;

     

data.sort（function（a，b）{return a.value - b.value;}）;

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

g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(5).tickFormat(function(d) { return parseInt(d / 1000); }).tickSizeInner([-height]));

g.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(y));

g.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("x", 0)
    .attr("height", y.bandwidth())
    .attr("y", function(d) { return y(d.area); })
    .attr("width", function(d) { return x(d.value); })
    .on("mousemove", function(d){
        tooltip
          .style("left", d3.event.pageX - 50 + "px")
          .style("top", d3.event.pageY - 70 + "px")
          .style("display", "inline-block")
          .html((d.area) + "<br>" + "£" + (d.value));
    })
        .on("mouseout", function(d){ tooltip.style("display", "none");});

}）;

最初的例子在这里：

https://bl.ocks.org/alandunning/7008d0332cc28a826b37b3cf6e7bd998

我查看之前的答案，并考虑将.attr（＆＃34; x＆＃34;，0）上的x属性更改为.attr（＆＃34; x＆＃34;，function（ d）{return width-x（d.value）}） 但那也没有用。

Answer 1

我假设您也想要反转轴。要做到这一点并让条形图从右向左移动，您需要更改范围以及如何绘制rects。

范围应如下所示，以使轴正确：

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

然后你可以像这样绘制它们以将它们放在正确的位置：

.attr("x", function(d){return x(d.value) })
.attr("width", function(d) { return x(0) - x(d.value); })

这是一个小提琴：https://plnkr.co/edit/4YLPCQ4SE35l4vZUy2tF?p=preview

这是你的意思吗？

Answer 2

首先撤消域名

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

将条形设置为开始于

 .attr("x", function(d){return x(d.value)})

和宽度，

   .attr("width", function(d) { return width - x(d.value); })