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軸上使用對數刻度：

 <!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軸

問題描述

1 個解決方案

解決方案1
2 已采納 2016-05-05 17:08:37

D3創建X軸

問題描述

1 個解決方案

解決方案1 2 已采納 2016-05-05 17:08:37

解決方案1
2 已采納 2016-05-05 17:08:37