用.data（）与D3J一起绘制线路

发布于 2025-01-29 06:28:50 字数 687 浏览 1 评论 0原文

我想从这样的数据集中绘制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个相同的行。是否只能使用数据（）绘制2行，或者我需要在使用.data（）函数之前转换linedata数组？谢谢

原文

I want to draw 2 lines from a data set like this
lineData = [{"x":57,"y":416},{"x":449,"y":30},{"x":977,"y":519},{"x":913,"y":53}]
line 1 {"x":57,"y":416},{"x":449,"y":30} and line 2 {"x":977,"y":519},{"x":913,"y":53}
with this code

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)

As a result, I got 4 identical lines. Is it possible to draw only 2 lines with data() or do I need to transform the lineData array before using in .data() function?
Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

入怼 2025-02-05 06:28:50

您需要在数据绑定之前进行一些转换工作：

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

You need do a little transform work before data binding:

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

回复收藏 0 原文

~没有更多了~