文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >基于id的D3 bezier链接对象合并数组

问基于id的D3 bezier链接对象合并数组
EN

Stack Overflow用户
提问于 2021-03-18 08:44:47
回答 1查看 46关注 0票数 1

下面快速查看一下我的数据：

代码语言：javascript
复制
var data = [
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':1},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':2},
  {'bankid': 2016, 'sub': 0, 'applied':2016, 'id':1},
  {'bankid': 2017, 'sub': 0, 'applied':2016, 'id':2},
...
];

基本上，我有一个可视化，其中一些圆圈在页面的顶部，有些在底部。我正试图把bezier链接附加到我的一些圈子里。我对所需的链接顶部节点和底部节点进行了data()调用。然后，我将顶部和底部圆的x和y值存储在两个不同的数组中。我的链接函数需要一个统一数组，所以我尝试基于id合并它们。如下所示：

代码语言：javascript
复制
var multiLinkData = topLinks.map(t1 => ({...t1, ...bottomLinks.find(t2 => t2.id === t1.id)}));

然而，这创建了一个数组，该数组具有正确的上圆坐标，但不正确的下圆坐标( bezier线都在同一个底部圆中结束)。

结果如下：

​

代码语言：javascript
复制
var margins = {top:20, bottom:300, left:200, right:100};

var height = 150;
var width = 950;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);

var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");

var xScale = d3.scalePoint()
    .range([0, width]);

var data = [
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':1},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':2},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':3},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':4},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':5},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':6},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':7},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':8},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':9},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':10},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':11},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':12},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':13},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':14},
  {'bankid': 2016, 'sub': 1, 'showLink':true, 'id':15},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 1},
  {'bankid': 2016, 'sub': 0, 'applied':2015},
  {'bankid': 2016, 'sub': 0, 'applied':2015},
  {'bankid': 2016, 'sub': 0, 'applied':2015},
  {'bankid': 2016, 'sub': 0, 'applied':2015},
  {'bankid': 2016, 'sub': 0, 'applied':2015},
  {'bankid': 2016, 'sub': 0, 'applied':2015},
  {'bankid': 2016, 'sub': 0, 'applied':2015},
  {'bankid': 2016, 'sub': 0, 'applied':2016, 'id':1},
  {'bankid': 2017, 'sub': 1, 'showLink':true, 'id':16},
  {'bankid': 2017, 'sub': 1, 'showLink':true, 'id':17},
  {'bankid': 2017, 'sub': 1, 'showLink':true, 'id':18},
  {'bankid': 2017, 'sub': 1, 'showLink':true, 'id':19},
  {'bankid': 2017, 'sub': 1, 'showLink':true, 'id':20},
  {'bankid': 2017, 'sub': 1, 'showLink':true, 'id':21},
  {'bankid': 2017, 'sub': 1, 'showLink':true, 'id':22},
  {'bankid': 2017, 'sub': 1, 'showLink':true, 'id':23},
  {'bankid': 2017, 'sub': 1},
  {'bankid': 2017, 'sub': 1},
  {'bankid': 2017, 'sub': 1},
  {'bankid': 2017, 'sub': 1},
  {'bankid': 2017, 'sub': 1},
  {'bankid': 2017, 'sub': 1},
  {'bankid': 2017, 'sub': 1},
  {'bankid': 2017, 'sub': 1},
  {'bankid': 2017, 'sub': 1},
  {'bankid': 2017, 'sub': 0, 'applied':2015},
  {'bankid': 2017, 'sub': 0, 'applied':2015},
  {'bankid': 2017, 'sub': 0, 'applied':2015},
  {'bankid': 2017, 'sub': 0, 'applied':2016, 'id':2},
  {'bankid': 2017, 'sub': 0, 'applied':2016, 'id':3},
  {'bankid': 2017, 'sub': 0, 'applied':2016, 'id':4},
  {'bankid': 2018, 'sub': 1},
  {'bankid': 2018, 'sub': 1},
  {'bankid': 2018, 'sub': 1},
  {'bankid': 2018, 'sub': 0, 'applied':2015},
  {'bankid': 2018, 'sub': 0, 'applied':2015},
  {'bankid': 2018, 'sub': 0, 'applied':2016, 'id':5},
  {'bankid': 2018, 'sub': 0, 'applied':2016, 'id':6},
  {'bankid': 2018, 'sub': 0, 'applied':2016, 'id':7},
  {'bankid': 2018, 'sub': 0, 'applied':2016, 'id':8},
  {'bankid': 2018, 'sub': 0, 'applied':2016, 'id':9},
  {'bankid': 2018, 'sub': 0, 'applied':2016, 'id':10},
  {'bankid': 2018, 'sub': 0, 'applied':2016, 'id':11},
  {'bankid': 2018, 'sub': 0, 'applied':2017, 'id':16},
  {'bankid': 2018, 'sub': 0, 'applied':2017, 'id':17},
  {'bankid': 2018, 'sub': 0, 'applied':2017, 'id':18},
  {'bankid': 2019, 'sub': 1, 'showLink':true, 'id':24},
  {'bankid': 2019, 'sub': 1},
  {'bankid': 2019, 'sub': 1},
  {'bankid': 2019, 'sub': 0, 'applied':2016, 'id':12},
  {'bankid': 2019, 'sub': 0, 'applied':2016, 'id':13},
  {'bankid': 2019, 'sub': 0, 'applied':2017, 'id':19},
  {'bankid': 2020, 'sub': 1, 'showLink':true, 'id':25},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 1},
  {'bankid': 2020, 'sub': 0, 'applied':2016, 'id':14},
  {'bankid': 2020, 'sub': 0, 'applied':2016, 'id':15},
  {'bankid': 2020, 'sub': 0, 'applied':2017, 'id':20},
  {'bankid': 2020, 'sub': 0, 'applied':2017, 'id':21},
  {'bankid': 2020, 'sub': 0, 'applied':2017, 'id':22},
  {'bankid': 2020, 'sub': 0, 'applied':2017, 'id':23},
  {'bankid': 2020, 'sub': 0, 'applied':2020, 'id':25},
  {'bankid': 2021, 'sub': 1},
  {'bankid': 2021, 'sub': 0, 'applied':2019, 'id':24},


];


var colorScale = d3.scaleOrdinal(["#003366","#366092","#4f81b9","#95b3d7","#b8cce4","#e7eef8"]);



  xScale.domain([2015,2016,2017,2018,2019,2020,2021]);
  //colorScale.domain(d3.extent(data, function(d) {return d.age; }));

  data.forEach(function (d) {
d.x = xScale(d.bankid);
d.y = d.sub ? height - 15 : height + 250;
  });

  var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) {
  return xScale(d.bankid);
}).strength(0.08))
.force("y", d3.forceY(function(d) {
  return d.sub ? height - 15 : height + 250
}).strength(0.05))
.force("collide", d3.forceCollide(6).iterations(1))
.stop();

for (var i = 0; i < 240; ++i) {
  simulation.tick();
  data.forEach(function (d) {
if (d.sub) {
  d.y = Math.min(d.y, height - 15);
} else {
  d.y = Math.max(d.y, height + 250);
}
  });
}

var colorMap = {
  2015:"#003366",
  2016:"#4f81b9",
  2017:"#95b3d7",
  2018:"#e7eef8",
  2019:"#d9d9d9",
  2020:"#a6a6a6",
  2021:"#f6d18b"
};

  var circles = graphGroup.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("r", 5)
.attr("cx", function(d) {
  return d.x;
})
.attr("cy", function(d) {
  return d.y;
})
.style('fill', function(d) {return d.sub ==1 ? colorMap[d.bankid] : colorMap[d.applied] ;});


var topCircles = d3.selectAll('circle').filter(function(d) {return d.showLink == true}).data();
var bottomCircles = d3.selectAll('circle').filter(function(d) {return d.sub == 0 && d.applied !== 2015}).data();


var topLinks = topCircles.map(function(d) {
  return {source: [d.x, d.y]}
});

var bottomLinks = bottomCircles.map(function(d) {
  return {target: [d.x, d.y]}
});

var multiLinkData = topLinks.map(t1 => ({...t1, ...bottomLinks.find(t2 => t2.id === t1.id)}));


  //console.log(bottomCircles);
  //console.log(multiLinkData);


var link = d3.linkHorizontal();


graphGroup.selectAll("path")
.data(multiLinkData)
.join("path")
.attr("d", link)
.attr("fill", "none")
.attr("stroke", "#d9d9d9");
代码语言：javascript
复制
<script src="https://d3js.org/d3.v5.min.js"></script>

​

不知道我的合并是怎么对我不利的。

问题

这种合并的语法修正是什么？

javascript
d3.js
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-18 09:38:54

您没有使用ID填充topLinks和bottomLinks。它应该是：

代码语言：javascript
复制
var topLinks = topCircles.map(function(d) {
  return {source: [d.x, d.y], id: d.id}
});

var bottomLinks = bottomCircles.map(function(d) {
  return {target: [d.x, d.y], id: d.id}
});

下面是您更改的代码：

​

代码语言：javascript
复制
var margins = {
  top: 20,
  bottom: 300,
  left: 200,
  right: 100
};

var height = 150;
var width = 950;

var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;

var svg = d3.select('body')
  .append('svg')
  .attr('width', totalWidth)
  .attr('height', totalHeight);

var graphGroup = svg.append('g')
  .attr('transform', "translate(" + margins.left + "," + margins.top + ")");

var xScale = d3.scalePoint()
  .range([0, width]);

var data = [{
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 1
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 2
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 3
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 4
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 5
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 6
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 7
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 8
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 9
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 10
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 11
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 12
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 13
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 14
  },
  {
    'bankid': 2016,
    'sub': 1,
    'showLink': true,
    'id': 15
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 1
  },
  {
    'bankid': 2016,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2016,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2016,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2016,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2016,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2016,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2016,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2016,
    'sub': 0,
    'applied': 2016,
    'id': 1
  },
  {
    'bankid': 2017,
    'sub': 1,
    'showLink': true,
    'id': 16
  },
  {
    'bankid': 2017,
    'sub': 1,
    'showLink': true,
    'id': 17
  },
  {
    'bankid': 2017,
    'sub': 1,
    'showLink': true,
    'id': 18
  },
  {
    'bankid': 2017,
    'sub': 1,
    'showLink': true,
    'id': 19
  },
  {
    'bankid': 2017,
    'sub': 1,
    'showLink': true,
    'id': 20
  },
  {
    'bankid': 2017,
    'sub': 1,
    'showLink': true,
    'id': 21
  },
  {
    'bankid': 2017,
    'sub': 1,
    'showLink': true,
    'id': 22
  },
  {
    'bankid': 2017,
    'sub': 1,
    'showLink': true,
    'id': 23
  },
  {
    'bankid': 2017,
    'sub': 1
  },
  {
    'bankid': 2017,
    'sub': 1
  },
  {
    'bankid': 2017,
    'sub': 1
  },
  {
    'bankid': 2017,
    'sub': 1
  },
  {
    'bankid': 2017,
    'sub': 1
  },
  {
    'bankid': 2017,
    'sub': 1
  },
  {
    'bankid': 2017,
    'sub': 1
  },
  {
    'bankid': 2017,
    'sub': 1
  },
  {
    'bankid': 2017,
    'sub': 1
  },
  {
    'bankid': 2017,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2017,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2017,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2017,
    'sub': 0,
    'applied': 2016,
    'id': 2
  },
  {
    'bankid': 2017,
    'sub': 0,
    'applied': 2016,
    'id': 3
  },
  {
    'bankid': 2017,
    'sub': 0,
    'applied': 2016,
    'id': 4
  },
  {
    'bankid': 2018,
    'sub': 1
  },
  {
    'bankid': 2018,
    'sub': 1
  },
  {
    'bankid': 2018,
    'sub': 1
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2015
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2016,
    'id': 5
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2016,
    'id': 6
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2016,
    'id': 7
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2016,
    'id': 8
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2016,
    'id': 9
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2016,
    'id': 10
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2016,
    'id': 11
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2017,
    'id': 16
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2017,
    'id': 17
  },
  {
    'bankid': 2018,
    'sub': 0,
    'applied': 2017,
    'id': 18
  },
  {
    'bankid': 2019,
    'sub': 1,
    'showLink': true,
    'id': 24
  },
  {
    'bankid': 2019,
    'sub': 1
  },
  {
    'bankid': 2019,
    'sub': 1
  },
  {
    'bankid': 2019,
    'sub': 0,
    'applied': 2016,
    'id': 12
  },
  {
    'bankid': 2019,
    'sub': 0,
    'applied': 2016,
    'id': 13
  },
  {
    'bankid': 2019,
    'sub': 0,
    'applied': 2017,
    'id': 19
  },
  {
    'bankid': 2020,
    'sub': 1,
    'showLink': true,
    'id': 25
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 1
  },
  {
    'bankid': 2020,
    'sub': 0,
    'applied': 2016,
    'id': 14
  },
  {
    'bankid': 2020,
    'sub': 0,
    'applied': 2016,
    'id': 15
  },
  {
    'bankid': 2020,
    'sub': 0,
    'applied': 2017,
    'id': 20
  },
  {
    'bankid': 2020,
    'sub': 0,
    'applied': 2017,
    'id': 21
  },
  {
    'bankid': 2020,
    'sub': 0,
    'applied': 2017,
    'id': 22
  },
  {
    'bankid': 2020,
    'sub': 0,
    'applied': 2017,
    'id': 23
  },
  {
    'bankid': 2020,
    'sub': 0,
    'applied': 2020,
    'id': 25
  },
  {
    'bankid': 2021,
    'sub': 1
  },
  {
    'bankid': 2021,
    'sub': 0,
    'applied': 2019,
    'id': 24
  },


];


var colorScale = d3.scaleOrdinal(["#003366", "#366092", "#4f81b9", "#95b3d7", "#b8cce4", "#e7eef8"]);



xScale.domain([2015, 2016, 2017, 2018, 2019, 2020, 2021]);
//colorScale.domain(d3.extent(data, function(d) {return d.age; }));

data.forEach(function(d) {
  d.x = xScale(d.bankid);
  d.y = d.sub ? height - 15 : height + 250;
});

var simulation = d3.forceSimulation(data)
  .force("x", d3.forceX(function(d) {
    return xScale(d.bankid);
  }).strength(0.08))
  .force("y", d3.forceY(function(d) {
    return d.sub ? height - 15 : height + 250
  }).strength(0.05))
  .force("collide", d3.forceCollide(6).iterations(1))
  .stop();

for (var i = 0; i < 240; ++i) {
  simulation.tick();
  data.forEach(function(d) {
    if (d.sub) {
      d.y = Math.min(d.y, height - 15);
    } else {
      d.y = Math.max(d.y, height + 250);
    }
  });
}

var colorMap = {
  2015: "#003366",
  2016: "#4f81b9",
  2017: "#95b3d7",
  2018: "#e7eef8",
  2019: "#d9d9d9",
  2020: "#a6a6a6",
  2021: "#f6d18b"
};

var circles = graphGroup.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .style('fill', function(d) {
    return d.sub == 1 ? colorMap[d.bankid] : colorMap[d.applied];
  });


var topCircles = d3.selectAll('circle').filter(function(d) {
  return d.showLink == true
}).data();
var bottomCircles = d3.selectAll('circle').filter(function(d) {
  return d.sub == 0 && d.applied !== 2015
}).data();


var topLinks = topCircles.map(function(d) {
  return {
    source: [d.x, d.y],
    id: d.id
  }
});

var bottomLinks = bottomCircles.map(function(d) {
  return {
    target: [d.x, d.y],
    id: d.id
  }
});

var multiLinkData = topLinks.map(t1 => ({ ...t1,
  ...bottomLinks.find(t2 => t2.id === t1.id)
}));


//console.log(bottomCircles);
//console.log(multiLinkData);


var link = d3.linkHorizontal();


graphGroup.selectAll("path")
  .data(multiLinkData)
  .join("path")
  .attr("d", link)
  .attr("fill", "none")
  .attr("stroke", "#d9d9d9");
代码语言：javascript
复制
<script src="https://d3js.org/d3.v5.min.js"></script>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66687565

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档