我想從這樣的資料集中繪制 2
lineData = [{"x":57,"y":416},{"x":449,"y":30},{"x":977,"y":519},{"x":913,"y":53}]
行 1 {"x":57,"y":416},{"x":449,"y":30} 和第 2 行 {"x":977 ,"y":519},{"x":913,"y":53} 使用此代碼
lineData = [{"x":57,"y":416},{"x":449,"y":30},{"x":977,"y":519},{"x":913,"y":53}
svgGroup
.selectAll("line")
.data(lineData)
.enter()
.append("line")
.attr("x1", cData[0].x)
.attr("x2", cData[1].x)
.attr("y1", cData[0].y)
.attr("y2", cData[1].y)
結果，我得到了 4 條相同的線。是否可以使用 data() 僅繪制 2 條線，還是在使用 .data() 函式之前需要轉換 lineData 陣列？謝謝
uj5u.com熱心網友回復：
在資料系結之前你需要做一些轉換作業：
let rawData = [
{"x":57,"y":416},{"x":449,"y":30}, // lineA
{"x":977,"y":519},{"x":913,"y":53} // lineB
],
// [lineA, lineB] -> [[pointA1, pointA2], [pointB1, pointB2]]
transformData = [[rawData[0], rawData[1]], [rawData[2], rawData[3]]];
d3.select("#container")
.selectAll("line")
.data(transformData)
.enter()
.append("line")
.attr("x1", d => d[0].x) // d -> line -> [point1, point2]
.attr("x2", d => d[0].y)
.attr("y1", d => d[1].x)
.attr("y2", d => d[0].y)
.attr("stroke", 'blue')
.attr("stroke-width", 1);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/477792.html
標籤：d3.js