D3 创建 X 轴

Question

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

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 轴。

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

Answer 1

我的第一条评论是转向适当的基于 svg 的绘图，而不是使用 div 来创建您的条形图。当开始一个新的情节时，我倾向于在你的 x 轴上 this classic example. You, though are going to want to use a 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>

D3 创建 X 轴

D3 creating X-axis

javascript

axis

bar-chart

d3.js