D3 X-Achse Wert auf der linken Seite gestapelt

Question

Ich habe versucht, eine einfache Liniendiagramm zu machen. Die x-Achse zeigt 10,100,1000 usw. Werte Aus irgendeinem Grund bekomme ich alle Werte auf der linken Seite der x-Achse gestapelt, anstatt sie gleichmäßig auf der Achse zu verteilen.

var data = [ 
    {views:10, odds: 56}, 
    {views:100, odds: 64}, 
    {views:1000, odds: 81}, 
    {views:10000, odds: 95}, 
    {views:100000, odds: 99}, 
    {views:1000000, odds: 99}, 
    {views:10000000, odds: 100}, 
]; 

// Set the dimensions of the canvas/graph 
var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
    width = 600 - margin.left - margin.right, 
    height = 270 - margin.top - margin.bottom; 

// Set the ranges 
var x = d3.scale.linear() 
.domain([ 
    d3.min(data, function(d) { return d.views; }), 
    d3.max(data, function(d) { return d.views; }) 
]) 
.range([0, width]); 

var y = d3.scale.linear() 
.domain([ 
    d3.min(data, function(d) { return d.odds; }), 
    d3.max(data, function(d) { return d.odds; }) 
]) 
.range([height, 0]); 

// Define the axes 
var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom").ticks(7) 
    .tickValues(data.map((d)=>{ return d.views; })); 

var yAxis = d3.svg.axis().scale(y) 
    .orient("left").ticks(7); 

// Define the line 
var valueline = d3.svg.line() 
    .x(function(d) { return x(d.views); }) 
    .y(function(d) { return y(d.odds); }); 

// Adds the svg canvas 
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 + ")"); 

    // Add the valueline path. 
    svg.append("path") 
     .attr("class", "line") 
     .attr("d", valueline(data)); 

    // Add the X Axis 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    // Add the Y Axis 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

https://jsfiddle.net/guy_l/77agq0hz/

Answer 1

Dies ist das erwartete Verhalten. Sie sind nicht auf der linken Seite "gestapelt", es ist nur ein mathematisches Problem: jeder Wert von x ist nur 10% des nächsten Wertes! Denken Sie daran, dass Ihre Domain von 10 bis 10 Millionen reicht, also würden die Punkte nie gleichmäßig verteilt sein: 90% Ihrer Domain sind nur der Abstand zwischen dem 6. und dem 7. Punkt.

können Sie den Maßstab für eine Ordnungs ein ändern oder, wenn Sie es quantitative behalten wollen, müssen Sie eine hier logarithmische Skala:

d3.scale.log(); 

Ihre aktualisierte Geige Check: https://jsfiddle.net/gerardofurtado/v17cpqdk/