Question

我是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/

Answer 1

给出这样的保证金：

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

Answer 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或canvas元素进行操作。为此，改变条间距的方法会有所不同。

Answer 3

width = 100; 尝试添加.attr("width", width/data.length - 10) 或者如果你在例子中做，你需要添加＆＃34; height＆＃34;属性来制作垂直空间

D3之间的间距

3 个答案: