D3 Schaffung X-Achse

Hallo Ich verwende den folgenden CodeD3 Schaffung X-Achse

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

Von http://codepen.io/mbostock/pen/Jaemg und ich versuche, x-Achse mit einem logarithmischen Format hinzuzufügen.

Was ich versuche zu erreichen ist das Bild unten, aber ich bleibe Sackgassen. Irgendein Hinweis oder eine Idee, wie dies zu erreichen ist. Vielen Dank für Ihre Hilfe.

Quelle

2016-05-05 user3837019

Sind Sie fragen, wie Sie eine Log-Skala verwenden, oder wie eine Achse zu Ihrem Grundstück hinzufügen? Oder beides? – Mark

Bitte um beides. – user3837019

Zeichnen Sie absichtlich mit 'div' anstelle von svg? – Mark

Mein erster Kommentar wäre, um zu einer richtigen svg basierte Zeichnung statt div zu verschieben, um Ihre Bars zu erstellen. Wenn ich eine neue Handlung beginne, tendiere ich dazu, meine Arbeit von this klassischen Beispiel zu starten. Sie, gehen zu wollen, obwohl eine log scale auf der x-Achse verwenden:

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

Quelle

2016-05-05 17:08:37 Mark

Danke für die Antwort. Übrigens, statt bei 0,001 zu beginnen, können Sie nicht bei 0 beginnen. – user3837019

@ user3837019, weil zu JavaScript, Math.log (0) == -Infinity, log 0 keine reelle Zahl ist. – Mark

@ user3837019, wenn Sie wollen, können Sie es jedoch "fälschen". Sehen Sie das aktualisierte Code-Snippet oben ... – Mark

D3 Schaffung X-Achse

Antwort

Verwandte Themen