Javascript D3：多维线数组

我想用D3库向SVG中添加一个多维行数组。但不知怎的，台词没有出现。javascript中没有错误消息，所以我想我不可能完全错了，但是缺少了一些东西。我试着以迈克·博斯托克的描述为例

我有一组行，看起来像这样：

var datasetPolylines = [[[-10849.0, 1142.0, -10720.0, 454.0],[x1, y1, x2, y2],[x1, y1, x2, y2]...],[polyline],[polyline]...];

对于每一行，该行的

x

和

y

值在数组中有4个点

现在，我尝试将它们添加到我的主SVG中，如下所示：

d3.select("#mainsvg").selectAll("g")
                    .data(datasetPolylines) 
                    .enter()
                    .append("g")
                    .selectAll("line")
                    .data(function (d) {return d;})
                    .enter()
                    .append("line")
                    .attr("x1", function(d, i) { 
               return xScale(i[0]);
                       })
                .attr("y1", function(d, i) {
               return yScale(i[1]);
                       })
                .attr("x2", function(d, i) {
               return xScale(i[2]);
                     })
                .attr("y2", function(d, i) {
                   return yScale(i[3]);
                     })
                    .attr("stroke-width", 2)
                    .attr("stroke", "blue")
                    .attr("fill", "none");

var datasetLines = [];
var datasetPolylines = [];

/**Add a line to the dataset for lines*/
function addLineToDataset(x1, y1, x2, y2){
var newNumber1 = x1;    
var newNumber2 = y1;    
 var newNumber3 = x2;
var newNumber4 = y2;
datasetLines.push([newNumber1, newNumber2, newNumber3, newNumber4]);
}

/**Add polyline to the dataset for polylines*/
function addPolyline(){

var polyline = [];

 for (i in datasetLines) {
    polyline[i] = datasetLines[i];
}
datasetPolylines.push(polyline);  
}


/**Draw all polylines from the polylinearray to the svg*/
function showPolylineArray(){

//Create scale functions for x and y axis
var xScale = d3.scale.linear()
                     .domain([d3.min(outputRange, function(d) { return d[0]; }),  d3.max(outputRange, function(d) { return d[0]; })])//get minimum and maximum of the first entry of the pointarray
                     .range([padding, w - padding]); //w, the SVGs width. without padding 0,w

var yScale = d3.scale.linear()
                     .domain([d3.min(outputRange, function(d) { return d[1]; }),  d3.max(outputRange, function(d) { return d[1]; })])
                     .range([h - padding, padding]); //without padding h,0

d3.select("#mainsvg").selectAll("g")
                    .data(datasetPolylines)
                    .enter()
                    .append("g")
                    .selectAll("line")
                    .data(function (d) {return d;})
                    .enter()
                    .append("line")
                    .attr("x1", function(d) {
                          return xScale(d[0]);
                     })
                    .attr("y1", function(d) {
                         return yScale(d[1]);
                     })
                    .attr("x2", function(d) {
                         return xScale(d[2]);
                     })
                    .attr("y2", function(d) {
                        return yScale(d[3]);
                     })
                    .attr("stroke-width", 2)
                    .attr("stroke", "blue")
                    .attr("fill", "none")
                    .on('mouseover', function(d){ d3.select(this).style({stroke: 'red'}); })
                    .on('mouseout', function(d){ d3.select(this).style({stroke: 'blue'}); })
                    .append("title")
                    .text("Polyline");

}

我非常感谢每一个关于我错在哪里的暗示。我在这方面已经有几天了，只是不明白：(

如果我只画一条多段线和多条线，并且只使用一次.data属性，那么一切都很好。我也不能将这些线合并到一条路径，因为它们并不总是连接在一起的，必须单独绘制

完整的（现在感谢Christopher和Lars也在工作）代码示例如下所示：

d3.select("#mainsvg").selectAll("g")
                    .data(datasetPolylines) 
                    .enter()
                    .append("g")
                    .selectAll("line")
                    .data(function (d) {return d;})
                    .enter()
                    .append("line")
                    .attr("x1", function(d, i) { 
               return xScale(i[0]);
                       })
                .attr("y1", function(d, i) {
               return yScale(i[1]);
                       })
                .attr("x2", function(d, i) {
               return xScale(i[2]);
                     })
                .attr("y2", function(d, i) {
                   return yScale(i[3]);
                     })
                    .attr("stroke-width", 2)
                    .attr("stroke", "blue")
                    .attr("fill", "none");

var datasetLines = [];
var datasetPolylines = [];

/**Add a line to the dataset for lines*/
function addLineToDataset(x1, y1, x2, y2){
var newNumber1 = x1;    
var newNumber2 = y1;    
 var newNumber3 = x2;
var newNumber4 = y2;
datasetLines.push([newNumber1, newNumber2, newNumber3, newNumber4]);
}

/**Add polyline to the dataset for polylines*/
function addPolyline(){

var polyline = [];

 for (i in datasetLines) {
    polyline[i] = datasetLines[i];
}
datasetPolylines.push(polyline);  
}


/**Draw all polylines from the polylinearray to the svg*/
function showPolylineArray(){

//Create scale functions for x and y axis
var xScale = d3.scale.linear()
                     .domain([d3.min(outputRange, function(d) { return d[0]; }),  d3.max(outputRange, function(d) { return d[0]; })])//get minimum and maximum of the first entry of the pointarray
                     .range([padding, w - padding]); //w, the SVGs width. without padding 0,w

var yScale = d3.scale.linear()
                     .domain([d3.min(outputRange, function(d) { return d[1]; }),  d3.max(outputRange, function(d) { return d[1]; })])
                     .range([h - padding, padding]); //without padding h,0

d3.select("#mainsvg").selectAll("g")
                    .data(datasetPolylines)
                    .enter()
                    .append("g")
                    .selectAll("line")
                    .data(function (d) {return d;})
                    .enter()
                    .append("line")
                    .attr("x1", function(d) {
                          return xScale(d[0]);
                     })
                    .attr("y1", function(d) {
                         return yScale(d[1]);
                     })
                    .attr("x2", function(d) {
                         return xScale(d[2]);
                     })
                    .attr("y2", function(d) {
                        return yScale(d[3]);
                     })
                    .attr("stroke-width", 2)
                    .attr("stroke", "blue")
                    .attr("fill", "none")
                    .on('mouseover', function(d){ d3.select(this).style({stroke: 'red'}); })
                    .on('mouseout', function(d){ d3.select(this).style({stroke: 'blue'}); })
                    .append("title")
                    .text("Polyline");

}

---

除了数据引用（Christopher指出）之外，您的代码几乎可以正常工作。您没有向我们展示完整的代码，但是您拥有的代码应该可以通过这些修改正常工作

---

完整的示例。

您是否打算使用

d[0]

而不是

i[0]

etc？你好，克里斯托弗，谢谢，但我试过了，但没有用。谢谢克里斯托弗，事实上这确实解决了问题，但我现在有另一个问题，那就是绘制的数组中的线不完整。我必须调用showPolylineArray函数两次才能得到画布上显示的所有线。你知道吗，为什么不是所有的数据都是从数组中提取的呢？当我在将每个多段线添加到数组后直接绘制它时，没有问题，就在我使用上面解释的嵌套示例时..嗨，Lars，谢谢你的回答，我尝试了你的建议，但仍然看不到任何东西..我还需要在属性函数中更改什么吗？现在its:.attr（“x1”，函数（d，i）{return xScale（d[0]）；}）我被纠正了--我被括号弄糊涂了。你实际上只需要两个级别。我会更新答案的。嗨，拉尔斯，谢谢！事实上它现在可以工作了，但它显示了一些磨损行为，例如，如果数组中只有一条多段线，它就不会显示，只要我有多条。如果我有许多多段线，也会有一些丢失。Ver我很奇怪。这就是为什么我在我的问题上发布了完整的代码。也许你知道那里发生了什么？我的javascript不是很好，我正在从我的gwt java应用程序调用函数。我从数据库获取数据，这些都是相当复杂的长线。如果你想，我可以检索一个示例。我发现一定有时间上的一个问题，我已经在画线了，但我还没有把它们写进数组或其他什么东西。我想这就是为什么我画线时数据不完整的原因。当我两次添加相同的多段线时，所有的数据都在那里。但是非常感谢你的帮助。我想我现在走对了方向。我还有另一个问题n：如果我不想在每一行，而是在每一组行中添加鼠标悬停颜色更改或其他属性，我应该把这个语句放在哪里？直接放在.append（“g”）后面，它不会起作用。。