绘制点x和y，轴y和x没有正确显示

我想通过在x和y轴上放置点来生成加载csv文件的折线图。出于某种奇怪的原因，轴没有正确显示。我对x和y有负值。所以它应该有一个笛卡尔飞机，就像这张图片中的笛卡尔飞机。在这种情况下，必须显示完整的笛卡尔飞机。在我看来，x和y有负值。绘制点x和y，轴y和x没有正确显示

我不知道为什么点显示错误。

更新按钮，加载新的点更新图形的值。

http://plnkr.co/edit/dDx8gRZIfjvemWpgikAp?p=preview

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().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

// Define the axes 
var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom").ticks(5); 

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

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

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

来源

2017-09-27 yavg

在x和y的负值没有显示，因为您的最低域值是0：

x.domain([0, d3.max(data, function(d) { return d.datax; })]); 
y.domain([0, d3.max(data, function(d) { return d.datay; })]);

它应该是（这样设置的最小值数据集作为域最小）

x.domain(d3.extent(data, function(d) { return d.datax; })); 
y.domain(d3.extent(data, function(d) { return d.datay; }));

工作代码here

来源

2017-09-27 05:35:03 Cyril

正如我在问题中所说的那样，我需要像图像那样具有笛卡尔平面，在我的代码中，点显示的太稀少了。 https://i.imgur.com/klA6pZK.jpg – yavg

绘制点x和y，轴y和x没有正确显示

回答

相关问题