D3 钢筋间距答案

【问题标题】：D3 spacing between barsD3 钢筋间距
【发布时间】：2016-08-05 13:47:40
【问题描述】：

我是 D3 的新手，希望有人可以帮助我弄清楚如何在各个条形之间添加一些间距。代码如下：

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

我正在按照这个例子创建条形图https://bost.ocks.org/mike/bar/

【问题讨论】：

标签： javascript d3.js svg bar-chart

【解决方案1】：

像这样给一个margin-top：

d3.select("#chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .style("background-color", "red")
    .style("margin-top", "10px") //give margin-top for spacing between bars
    .text(function(d) { return d; });

工作代码here

【讨论】：

实际上并没有考虑在 .style 中使用 margin-top。感谢您的帮助。

【解决方案2】：

这些条在 DOM 中作为 div 存在，这意味着您可以使用 div 的传统样式来添加间距。

找到这个部分：

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

并将margin: 1px; 更改为您想要的间距。

但你应该小心，因为通常 d3 不会在 div 上运行，而是在 SVG 或画布元素上运行。为此，更改条间距的方法会有所不同。

【讨论】：

感谢您的解释和回答。似乎运作良好。

【解决方案3】：

width = 100; 尝试添加.attr("width", width/data.length - 10) 或者，如果您按照示例进行制作，则需要添加“高度”属性以制作垂直空间

【讨论】：