javascript - 在 D3 中以编程方式将形状分配给节点

Question

我正在尝试根据节点值分配形状。我的代码是这样的:

// some variables from the UI
var anodezoom = d3.select("#nodezoom").property("value");
var asize = d3.select("#ona").property("value");
var acolor = d3.select("#color").property("value");
var ameasure = d3.select("#shape").property("value");
// build, resize, recolor and reshape the nodes
nodes = svg.selectAll('.node')
   .data(graph.nodes.filter(function (d) {
       return d.degree > 0;
   }))
   .enter()
   .append(function (d) {
       shaping(ameasure, d);
   })
   .attr('class', 'node')
   .attr('r', function (d) {
       return resizing(anodezoom, asize, d);
   })
   .style('fill', function (d) {
       return coloring(acolor, d);
   })
   .style('stroke', function (d) {
       return coloring(acolor, d);
   })
   .call(force.drag);

我得到的错误是:

TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node

发生这种情况是因为我无法在整形函数中返回节点对象，即:

function shaping(ashape, anode) {
    var shape = null;
    if (ashape === "gender") {
        if (anode.gender === "M") {
            shape = d3.svg.symbolTypes[0];
        } else if (anode.gender === "F") {
            shape = d3.svg.symbolTypes[1];
        } else {
            shape = d3.svg.symbolTypes[2];
        }
    return shape;
 };

我基本上返回一个字符串，这对我来说听起来不错，因为它是合法的:

.append('circle')

但它不起作用，那么有没有办法返回一个在我的shaping()函数中分配了正确形状的Node对象？

编辑

我已将代码更改为:

nodes = svg.selectAll('path')
                    .data(graph.nodes.filter(function (d) {
                        return d.degree > 0;
                    }))
                    .enter()
                    .append('path')
                    .attr('d', d3.svg.symbol().type(function (d) {
                        return shaping(ashape, d);
                    }))
                    .attr('class', 'node')
                    .attr('r', function (d) {
                        return resizing(anodezoom, asize, d);
                    })
                    .style('fill', function (d) {
                        return coloring(acolor, d);
                    })
                    .style('stroke', function (d) {
                        return coloring(acolor, d);
                    })
                    .call(force.drag);

但是虽然链接按预期显示，但所有节点都位于左上角，几乎不可见......我在这里缺少什么？

Answer 1

设置路径数据时，需要附加路径，而不是 d3 形状，然后指定形状:

.append('path')
.attr('d', function(d) { return d3.symbol().type( /* shape */ ) });

这是一个使用形状序数比例的简单示例 (var shape = d3.scaleOrdinal(d3.symbols);):

 .append('path')   
 .attr("d", d3.symbol().type( function(d) { return shape(d.group);} ) )

它是在这个block中实现的。这个答案是用 d3v4 的，d3v3 代码会有点不同。下面的一个最小示例对两者的代码进行了比较:

d3v3:

var svg = d3.select('body')
  .append('svg');

svg.selectAll('path')
  .data(d3.range(6))
  .enter()
    .append('path')
    .attr('transform',function(d,i) { return 'translate('+(i * 30 + 30) + ',20)'; })
    .attr('d',d3.svg.symbol()
                .type(function(d,i){ return d3.svg.symbolTypes[i]; })
                .size(function(d,i){ return i * 30 + 30; })
         )

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

d3v4:

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

svg.selectAll('.symbol')
   .data(d3.range(6))
   .enter()
   .append('path')
   .attr('transform',function(d,i) { return 'translate('+(i*30+30)+','+30+')';})
   .attr('d',d3.symbol()
           .type(function(d,i){ return d3.symbols[i];})
           .size(function(d,i){ return i * 30 + 30; })
   )

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>