Javascript D3.js路径在V3和V4中的方向不同

我试图在D3V3和V4中创建相同的多线图，但它们的行为不同，原因我不明白。我可以在V4代码中更改什么，以使路径以正确的顺序连接（根据x轴而不是y轴）

以下是V3提供的内容，摘自我为其制作的：

…但这里是V4：

JSFIDLE还不支持V4，所以下面是我的代码：

var margin = {top: 20, right: 40, bottom: 100, left: 100},
width = 500 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);

var line = d3.line()
      .x(function(d) { return x(d.depth); })
      .y(function(d) { return y(d.carat); });

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

d3.csv("diamonds.csv", function(error, data) {
data.forEach(function(d) {
  d.carat = +d.carat;
  d.depth = +d.depth;
  //d.cut = +d.cut;
})

data.sort(function(a,b) { return a.x - b.x; });

x.domain(d3.extent(data, function(d) { return d.depth; })).nice();
y.domain(d3.extent(data, function(d) { return d.carat; })).nice();

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
  .selectAll("text")
    .attr("y", 6)
    .attr("x", 5)
    .attr("dy", ".35em")
    .attr("transform", "rotate(45)")
    .style("text-anchor", "start")

    var dataNest = d3.nest()
    .key(function(d) {return d.cut;})
    .entries(data);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("class", "label")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Price");

var color = d3.scaleOrdinal(d3.schemeCategory10);

dataNest.forEach(function(d) {
  svg.append("path")
    .attr("class", "line")
    .style("stroke", function() { // Add the colours dynamically
                return d.color = color(d.key); })
    .attr("d", line(d.values));
        });

});

---

如果使用D3 v3.x查看代码，则在加载数据后执行了以下操作：

data.forEach(function(d) {
    d.x = +d.depth;
    d.carat = +d.carat;
})

并使用该属性

x

进行排序：

data.sort(function(a,b) { return a.x - b.x; });

data.sort(function(a,b) { return a.depth - b.depth; });

但是，在v4.x版本中，您做到了：

data.forEach(function(d) {
    d.depth = +d.depth;
    d.carat = +d.carat;
})

并使用不存在的

x

进行排序（单独排序的问题是使行与v3.x不同）

解决方案：使用

深度

进行排序：

data.sort(function(a,b) { return a.x - b.x; });

data.sort(function(a,b) { return a.depth - b.depth; });

以下是使用v4.x版本的代码：

var保证金={
前20名，
右:40,，
底数：100，
左：100
},
宽度=500-边距。左侧-边距。右侧，
高度=400-margin.top-margin.bottom；
var x=d3.scaleLinear（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
var xAxis=d3.axisBottom（x）；
var yAxis=d3.轴左（y）；
var line=d3.line（）
.x（功能（d）{
返回x（d.深度）；
})
.y（功能（d）{
返回y（d克拉）；
});
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var data=d3.csvParse（d3.select（“pre#data”）.text（）；
data.forEach（函数（d）{
d、 克拉=+d.克拉；
d、 深度=+d.深度；
//d、 切割=+d.切割；
})
数据排序（函数（a，b）{
返回a.depth-b.depth；
});
x、 域（d3）。范围（数据，函数（d）{
返回d.depth；
})).nice（）；
y、 域（d3）。范围（数据，函数（d）{
返回d.K；
})).nice（）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.selectAll（“文本”）
.attr（“y”，6）
.attr（“x”，5）
.attr（“dy”，“.35em”）
.attr（“变换”、“旋转（45）”）
.style（“文本锚定”、“开始”）
var dataNest=d3.nest（）
.键（功能（d）{
返回d.cut；
})
.条目（数据）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“类别”、“标签”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“价格”）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
forEach（函数（d）{
追加（“路径”）
.attr（“类”、“行”）
.style（“stroke”，function（）{//动态添加颜色
返回d.color=color（d.key）；
})
.attr（“d”，行（d.values））；
});
pre{
显示：无；
}
路径
{
填充：无；
行程：#000；
}
.线路{
填充：无；
//笔画：绿色；
//笔画宽度：3.5px；
}

克拉、切割、颜色、清晰度、深度、表、价格、x、y、z
0.41，理想，G，VS1,60.8,56899,4.79,4.82,2.92
0.3，理想，F，VS1,62.1,55612,4.31,4.35,2.69
1.25，理想，H，SI1,62.2,576661,6.86,6.9,4.28
0.41，理想，G，VS2,61.4,551061,4.8,4.75,2.93
0.53，特优，E，VVS2,62.4,562331,5.19,5.17,3.23
1.14，非常好，G，VS2,63.2,566435,6.67,6.63,4.2
0.51，溢价，G，SI1,62,591053,5.12,5.1,3.17
1.51，良好，H，VVS2,63.1,5911826,7.26,7.28,4.59
1.31，理想，J，SI1,62.5,566337,6.95,7.04,4.37
0.33，非常好，I，VVS1,61.7,61608,4.43,4.45,2.74
0.42，理想，F，VS1,62.3,551103,4.79,4.77,2.98
1.01，良好，E，VS2,60.8,636250,6.44,6.46,3.92
1，保费，F，SI1,62.7,595292,6.4,6.36,4
0.51，理想，G，VVS1,61.9,531919,5.14,5.2,3.2
0.34，理想，H，SI1,61.5,55647,4.53,4.55,2.79
0.23，特优，F，VVS2,61.3,59445,3.94,3.99,2.43
0.3，理想，F，VS2,62.9,57776,4.29,4.27,2.69
1.14，保费，F，SI1,60.4,586320,6.82,6.79,4.11
0.33，理想，J，VVS1,62.1,54509,4.45,4.47,2.77
0.41，溢价，H，SI1,60.9,60683,4.79,4.83,2.93
2.01，保费，J，SI2,62.8,5812407,8.09,8,5.05
2.01，非常好，I，SI1,60.3,5915126,8.14,8.21,4.93
0.4，非常好，D，VS2,62.8,58993,4.66,4.71,2.94
1.09，溢价，D，SI1,61.6,585799,6.61,6.57,4.06
0.3，理想，F，VS1,61.5,55612,4.31,4.34,2.66
0.77，非常好，H，SI2,63.6,582129,5.77,5.81,3.68
0.38，非常好，F，VS1,62.7,57883,4.71,4.64,2.93
0.54，溢价，E，VS1,60.3,581939,5.26,5.32,3.19
0.93，溢价，F，SI1,58.8,604010,6.49,6.37,3.78
0.32，理想，H，VS1,61.1,561,4.44,4.46,2.72
0.78，溢价，F，SI2,62.8,562200,5.9,5.86,3.69
0.4，理想，E，VS1,61.2,551005,4.79,4.76,2.92
0.41，理想，D，VS2,62.4,551076,4.79,4.76,2.98
0.73，非常好，E，SI1,61.6,592760,5.77,5.78,3.56
2.52，非常好，G，SI2,63.2,5817689,8.65,8.61,5.45
1.06，理想，D，VVS2,62,5612053,6.53,6.57,4.06
0.8，非常好，D，IF，63.3,576834,5.85,5.87,3.71
1.5，溢价，H，VS2,62.2,5810291,7.27,7.36,4.55
2.17，良好，H，SI2,58.9,6216036,8.48,8.52,5.01
1.58，理想，G，SI1,62.2,5511927,7.44,7.5,4.65
2.03，特优，H，VS2,62.1,5618139,8.2,8.12,5.07
0.58，非常好，D，SI2,62.9,561438,5.31,5.35,3.35
0.72，非常好，D，VS2,62.1,593016,5.7,5.73,3.55
0.38，理想，D，VVS2,61.5,571200,4.63,4.67,2.86
0.5，溢价，E，VS2,61.3,601624,5.07,5.11,3.12
0.31，理想，F，VS2,61.1,56640,4.35,4.39,2.67
1.41、溢价、D、SI2、61.1、566988、7.19、7.15、4.38
0.7，良好，I，VS1,63.2,552274,5.58,5.63,3.54
1.22，理想，F，SI2,62,574852,6.88,6.83,4.25
1.58，理想，H，VS2,61.4,5612334,7.5,7.56,4.62
1.2，理想，G，VS1,62,559625,6.81,6.87,4.24
1.03，溢价，H，I1,61.1,603172,6.46,6.51,3.96
0.77，非常好，H，VS1,62.8,582961,5.75,5.78,3.62
1.04，理想，I，VS2,61.5,575105,6.49,6.52,4
1，良好，H，SI1,63.7,604788,6.33,6.3,4.02
0.82，非常好，G，IF，61.9,574844,5.96,6,3.7
0.71，理想，D，VS1,60.9,573518,5.74,5.76,3.5
1.21，理想，I，SI2,64.6,564879,6.67,6.62,4.29
0.4，非常好，E，SI1,61.7,60687,4.68,4.72,2.9
1.11，保费，H，SI1,61.1,605433,6.68,6.62,4.06
1.5，理想，F，VS2,60.4,5714071,7.41,7.43,4.48
1.48，非常好，H，SI1,62.5,598815,7.16,7.23,4.5
0.28，理想，F，VVS2,61.5,57787,4.19,4.24,2.59
0.64，非常好，E，VS2,63.4,542114,5.52,5.49,3.49
1.68，理想，I，VS2,62.1,5710800,7.6,7.54,4.7
0.93，特优，G，SI2,61.7,603802,6.25,6。