将图例和节点更改为圆形图像

Question

我还是 D3.js 的新手，目前我已经使用 D3.js 移交了项目。

请问如何将颜色比例更改为图像？ Nodes 和 Legends 是相关的，Node 颜色是基于 Legends 的。

这里有我的 JSON。

"colourScale":"d3.scaleOrdinal().domain([\"Low\",\"Medium\",\"High\",\"Very High\"]).range([\"#009a44\",\"#eaaa00\",\"#f68d2e\",\"#bc204b\"]);",

这里是我的 Javascript

    // draw nodes
    var node = svg.selectAll(".node")
      .data(force.nodes())
      .enter().append("g")
      .attr("class", "node")
     .style("fill", function(d) { 
     if(d['group']==='Low')
     {
     return "#009a44";
     }
     else if(d['group']==='Medium')
     {
     return "#eaaa00";
     }
     else if(d['group']==='High')
     {
     return "#f68d2e";
     }
     else{
      return "#bc204b"; 
     }

     })

      .style("opacity", options.opacity)
      .on("mouseover", mouseover)

      .on("mouseout", mouseout)
      .on("click", click)
      .call(drag);

这里是我的结果截图。

Answer 1

首先，我建议您阅读this documentation，它可以为您提供一些关于如何使用 d3.js 管理颜色的见解。

实际上，您的 JSON 中包含所有必需的信息。所以首先你应该创建你的比例对象。这是一个使用 JSON 中提供的数据的示例。

var myData = ["Low","Medium","High","Very High"];

// Defining colors
var color = d3.scaleOrdinal()
  .domain(myData)
  .range(["#009a44","#eaaa00","#f68d2e","#bc204b"]) // Your data
  .unknown('black') // Fallback solution

之后，您应该以类似的方式将此对象应用于您的 d3 结构：

d3
  ... // Here goes your svg structure creation
  .style('fill', function(d) { // Applying your original scale
    return color(d.group);
  });

在这里您可以找到带有图例的节点图的完整示例

var myData = ["Low","Medium","High","Very High"];

var graph = {
  "nodes": [
    {"id": "Myriel", "group": 'Low'},
    {"id": "Napoleon", "group": 'Low'},
    {"id": "Mlle", "group": 'Medium'},
    {"id": "Mme", "group": 'Medium'},
    {"id": "CountessdeLo", "group": 'High'},
    {"id": "Geborand", "group": 'Very High'},
    {"id": "Champtercier", "group": 'Very High'},
    {"id": "Cravatte", "group": 'Random'},
  ],
  "links": [
  ]
}

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Defining colors
var color = d3.scaleOrdinal()
	.domain(myData)
  .range(["#009a44","#eaaa00","#f68d2e","#bc204b"]) // Your data
  .unknown('black') // Fallback solution

var linearScale = d3.scaleLinear()
	.domain([0, myData.length - 1])
	.range([0, 100]);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

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

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("g")
    .data(graph.nodes)
    .enter().append("g")
    
  var circles = node.append("circle")
      .attr("r", 20)
      .attr("fill", function(d) { return color(d.group); });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    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 + ")";
        })
  }

d3.select('#wrapper')
	.selectAll('text')
	.data(myData)
	.enter()
	.append('text')
	.attr('y', function(d, i) {
		return linearScale(i);
	})
	.text(function(d) {
		return d;
	})
	.style('fill', function(d) {
		return color(d);
	});

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

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

text {
  font-family: sans-serif;
  font-size: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<svg width="960" height="600">
  <g id="wrapper" transform="translate(100, 40)">
  	</g>
</svg>

如果我的答案对您来说不清楚，或者您需要一些额外的信息或帮助，请告诉我。