如何在d3.js中链接两个不同的形状

Question

首先感谢大家。 现在我有一个案例，我想用d3介绍不同服务的情况。

草案效果如图

我找到了一个例子https://bl.ocks.org/mbostock/4062045 但它只能创建圆形和混乱布局。

是否有人向我提供了如何使用d3实现此页面的指导。

Answer 1

下面的代码片段是开发一个D3力布局图表，其中包含不同形状的节点和连接它们的链接。 如果您需要将节点放置在静态位置，请参阅here

var graph = {
  "nodes": [{
    "name": "1",
    "rating": 90,
    "id": 2951,
    type: 'rect'
  }, {
    "name": "2",
    "rating": 80,
    "id": 654654,
    type: 'circle'
  }, {
    "name": "3",
    "rating": 80,
    "id": 6546544,
    type: 'rect'
  }, {
    "name": "4",
    "rating": 1,
    "id": 68987978,
    type: 'circle'
  }, {
    "name": "5",
    "rating": 1,
    "id": 9878933,
    type: 'rect'
  }, {
    "name": "6",
    "rating": 1,
    "id": 6161,
    type: 'circle'
  }],
  "links": [{
    "source": 0,
    "target": 1,
    "value": 2,
    "label": "publishedOn"
  }, {
    "source": 1,
    "target": 2,
    "value": 6,
    "label": "publishedOn"
  }, {
    "source": 3,
    "target": 4,
    "value": 4,
    "label": "containsKeyword"
  }, {
    "source": 4,
    "target": 5,
    "value": 3,
    "label": "containsKeyword"
  }]
}

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

var color = d3.scale.category20();

var force = d3.layout.force()
  .charge(-200)
  .linkDistance(50)
  .size([width + margin.left + margin.right, height + margin.top + margin.bottom]);

var zoom = d3.behavior.zoom()
  .scaleExtent([0.1, 10])
  .on("zoom", zoomed);

var drag = d3.behavior.drag()
  .origin(function(d) {
    return d;
  })
  .on("dragstart", dragstarted)
  .on("drag", dragged)
  .on("dragend", dragended);


var svg = d3.select("#map").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
  .call(zoom);

var rect = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "none")
  .style("pointer-events", "all");

var container = svg.append("g");

//d3.json('http://blt909.free.fr/wd/map2.json', function(error, graph) {

force
  .nodes(graph.nodes)
  .links(graph.links)
  .linkDistance(100)
  .start();

var link = container.append("g")
  .attr("class", "links")
  .selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) {
    return Math.sqrt(d.value);
  });

var node = container.append("g")
  .attr("class", "nodes")
  .selectAll(".node")
  .data(graph.nodes)
  .enter().append("g")
  .attr("class", "node")
  .call(drag);

node.each(function(d) {
  if (d.type == "circle") {
    d3.select(this).append("circle")
      .attr("r", 20)
      .style("fill", "#4EACFB");
  } else {
    d3.select(this).append("rect")
      .attr("height", 32)
      .attr("width", 90)
      .attr("x", -(90 / 2))
      .style("fill", "#56D075");
  }
});


force.on("tick", function() {
  link.attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });

  node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
});



function dottype(d) {
  d.x = +d.x;
  d.y = +d.y;
  return d;
}

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  force.start();
}

function dragged(d) {
  d.x = d3.event.x;
  d.y = d3.event.y;
}

function dragended(d) {
  d3.select(this).classed("dragging", false);
}

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.node-active {
  stroke: #555;
  stroke-width: 1.5px;
}

.link {
  stroke: #555;
  stroke-opacity: .3;
}

.link-active {
  stroke-opacity: 1;
}

.overlay {
  fill: none;
  pointer-events: all;
}

#map {
  border: 2px #555 dashed;
  width: 500px;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="map"></div>

编辑：您可以使用zoom.scaleExtent([extent])配置应用缩放比例的最小和最大范围。以前它是[1,10]，如果要缩小图表，请更新最小值。如果未指定scaleExtent，则返回当前比例范围，默认为[0，Infinity]。

var zoom = d3.behavior.zoom()
  .scaleExtent([0.1, 10])
  .on("zoom", zoomed);