Question

我正在尝试在直方图中设置条形填充，就像你有一个顺序尺度一样：

x = d3.scaleLinear()
    .domain([fist, last])
    .rangeRound([bottom, top])
    .padding(someFractionBetweenZeroAndOne)

不。这不起作用。那么我接着API documentation在连续的尺度上没有.padding方法！

嗯，我可以手动计算我的条形宽度，但实际上没有可用于连续尺度的集成padding解决方案吗？

Answer 1

它使没有意义上有线性刻度的填充！

但是，有几种方法可以为条形添加一些空间，比如使用组（如Bostock在this example中所做的那样）并在组内部设置矩形的位置，使其具有一定的空间。邻居。

另一种选择是改变矩形的位置和尺寸（如你所说，＆＃34;手动计算我的条宽度＆＃34; ）。例如，在本演示中，我将每个条的宽度更改为每个纸盒宽度的90％。

＆＃13;

var data = [{x:0, y:10},
            {x:2, y:40},
            {x:4, y:70},
            {x:6, y:30},
            {x:8, y:20}];

var svg = d3.select("body")
  .append("svg")
  .attr("width", 300)
  .attr("height", 200);

var xScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 300]);

var barWidth = xScale.domain()[1]/data.length;

var yScale = d3.scaleLinear()
  .domain([0, 80])
  .range([200, 0]);

var bars = svg.selectAll(".bars")
  .data(data)
  .enter()
  .append("rect");

bars.attr("x", function(d){ return xScale(d.x)})
  .attr("y", function(d){ return yScale(d.y)})
  .attr("width", function(d,i){ return xScale(barWidth) * 0.9})
  .attr("height", function(d){ return 200 - yScale(d.y)});

＆＃13;

rect {
  fill: teal;
  }

＆＃13;

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

＆＃13;

如何在d3.js v4中的连续刻度（例如scaleLinear）上设置填充？

1 个答案: