D3 创建 X 轴答案

【问题标题】：D3 creating X-axisD3 创建 X 轴
【发布时间】：2016-05-05 07:46:40
【问题描述】：

您好，我正在使用以下代码

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; });

来自http://codepen.io/mbostock/pen/Jaemg，我正在尝试以对数格式添加 x 轴。

我想要实现的是下图，但我一直遇到死胡同。关于如何实现这一目标的任何线索或想法。非常感谢您的帮助。

【问题讨论】：

您是在问如何使用对数刻度或如何在绘图中添加轴？还是两者兼而有之？
你是故意用div画图而不是用svg吗？

标签： javascript d3.js bar-chart axis

【解决方案1】：

我的第一条评论是改用基于svg 的正确绘图，而不是使用div 来创建您的条形图。当开始一个新的情节时，我倾向于从this经典例子开始我的工作。虽然你会想在你的 x 轴上使用 log scale：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .bar {
    fill: steelblue;
  }
  
  .bar:hover {
    fill: brown;
  }
  
  .axis {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .x.axis path {
    display: none;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var data = [4, 8, 15, 16, 23, 42];
   
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      width = 500 - margin.left - margin.right,
      height = 200 - margin.top - margin.bottom;

    var x = d3.scale.log()
      .domain([0.01, 100])
      .range([0, width]);

    var y = d3.scale.ordinal()
      .rangeRoundBands([0, height], .1)
      .domain(d3.range(data.length))

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("top")
      .ticks(0, "1g")
      .tickFormat(function(d){
        if (d === 0.01) return "0"
        else if (d === 1 || d === 10 || d === 100) return d;
        else return "";
      });

    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 + ")");

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0,0)")
      .call(xAxis);

    svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", 0)
      .attr("width", function(d){
        return x(d);
      })
      .attr("y", function(d, i) {
        return y(i);
      })
      .attr("height", function(d,i) {
        return y.rangeBand();
      });
      
  </script>

【讨论】：

感谢您的回答。对了，不是从0.001开始，为什么不能从0开始。
@user3837019，因为对于 JavaScript，Math.log(0) == -Infinity，log 0 不是实数。
@user3837019，不过，如果你愿意，你可以“伪造”它。请参阅上面的更新代码 sn-p...
非常感谢。我目前正在尝试为每个条设置边距并尝试将它们分组（将 4 个条组合在一起，然后有空间，重复）。我尝试为 .bar 类添加边距，但这似乎不起作用。有什么建议吗？
@user3837019，听起来您正在寻找分组条形图。你见过这个example吗？