Question

我有一个带正值和负值的水平条形图。我希望当值为正时，将y轴上的标签定位在轴的左侧，当值为负时，将标签定位在轴的右侧。

{value: -70, dataset:"foo"},
{value: -20, dataset:"bar"},
{value: 30, dataset:"baz"}
etc...

第一个条形的值为负，标签foo位于轴的右侧，这是我想要的位置。但是第三个柱的值是正的，所以我希望在y轴的左侧看到该标签。这可能吗？

这是JSFiddle：https://jsfiddle.net/Kavitha_2817/fmr1x1gu/18/

Answer 1

一个简单的解决方案（众多）正在调用两个轴生成器axisLeft和axisRight，并根据数据集值格式化滴答：

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + x(0) + ",0)")
    .call(d3.axisRight(y).tickFormat(function(d) {
        var value = data.filter(function(e) {
            return e.dataset === d
        })[0].value;
        return value > 0 ? null : d;
    }));

svg.append("g")
    .attr("class", "y axis left")
    .attr("transform", "translate(" + x(0) + ",0)")
    .call(d3.axisLeft(y).tickFormat(function(d) {
        var value = data.filter(function(e) {
            return e.dataset === d
        })[0].value;
        return value < 0 ? null : d;
    }));

这是一个演示：

var margin = {
    top: 30,
    right: 10,
    bottom: 50,
    left: 50
  },
  width = 500,
  height = 300;

var data = [{
  value: -10,
  dataset: "barbaz"
}, {
  value: 40,
  dataset: "barbar"
}, {
  value: -10,
  dataset: "foobaz"
}, {
  value: -50,
  dataset: "foobar"
}, {
  value: 30,
  dataset: "baz"
}, {
  value: -20,
  dataset: "bar"
}, {
  value: -70,
  dataset: "foo"
}];

// Add svg to
var svg = d3.select('body').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 + ')');

// set the ranges
var y = d3.scaleBand()
  .range([height, 0])
  .padding(0.1);

var x = d3.scaleLinear()
  .range([0, width]);

// Scale the range of the data in the domains
x.domain(d3.extent(data, function(d) {
  return d.value;
}));
y.domain(data.map(function(d) {
  return d.dataset;
}));

// append the rectangles for the bar chart
svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", function(d) {
    return "bar bar--" + (d.value < 0 ? "negative" : "positive");
  })
  .attr("x", function(d) {
    return x(Math.min(0, d.value));
  })
  .attr("y", function(d) {
    return y(d.dataset);
  })
  .attr("width", function(d) {
    return Math.abs(x(d.value) - x(0));
  })
  .attr("height", y.bandwidth());

// add the x Axis
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// add the y Axis
svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + x(0) + ",0)")
  .call(d3.axisRight(y).tickFormat(function(d) {
    var value = data.filter(function(e) {
      return e.dataset === d
    })[0].value;
    return value > 0 ? null : d;
  }));

svg.append("g")
  .attr("class", "y axis left")
  .attr("transform", "translate(" + x(0) + ",0)")
  .call(d3.axisLeft(y).tickFormat(function(d) {
    var value = data.filter(function(e) {
      return e.dataset === d
    })[0].value;
    return value < 0 ? null : d;
  }));

.bar--positive {
  fill: steelblue;
}

.bar--negative {
  fill: darkorange;
}

.y.axis.left {
  fill: none;
  stroke: none;
}

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

有条件地在y轴上定位标签

1 个答案: