Biểu tượng nút khác nhau cho đồ thị cưỡng bức d3.js

Question

Làm cách nào để hiển thị các nút dưới dạng các ký hiệu khác nhau trong thư viện hướng-lực của d3.js? Tôi muốn thực hiện điều gì đó tương tự như những gì tôi đã viết bên dưới:

var node = svg.selectAll(".node") 
     .data(graph.nodes) 
    .enter().append(function(d){return d.shape;}) 
     .attr("class", "node") 
     .attr("r", 5) 
     .style("fill", function(d) { return color(d.group); }) 
     .call(force.drag); 

Mỗi nút sẽ có hình dạng được mã hóa ("rect", "hình tròn", v.v.). Tuy nhiên, tôi gặp lỗi:

Uncaught TypeError: Object function (d){return "circle";} has no method 'indexOf' 

Câu hỏi khác tôi có liên quan đến điều này là: làm cách nào để chuyển đổi giữa việc áp dụng các thuộc tính khác nhau cho từng hình? Vòng kết nối cần một thuộc tính "r" được tinh chỉnh, nhưng các đường dẫn yêu cầu "chiều cao" và "chiều rộng". Cảm ơn!

Answer 1

Sử dụng d3.svg.symbol, như trong ví dụ force-directed symbols.