D3 从所有圆形到不同形状的散点图

Question

我正在尝试学习 D3，正在看这个例子：

http://bl.ocks.org/weiglemc/6185069

我现在想做的是改变点的形状，所以我想要基于数据集中谷物品牌的圆形、正方形和三角形，而不是所有圆形作为数据点。这看起来应该是一个简单的更改，但当我进行更改时，我无法显示形状。

我知道需要在这一段代码中进行此更改：

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));}) 
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d["Cereal Name"] + "<br/> (" + xValue(d) 
            + ", " + yValue(d) + ")")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });

我需要更改圆的附加和属性。我想使用条件所以

    .attr("d", function(d,i) {if (d["Cereal Name"] == "Nabisco" return d3.svg.symbol().type("circle"); 
else if (d["Cereal Name"] == "Post" return d3.svg.symbol().type("triangle-down"); 
else return d3.svg.symbol().type("circle")

但是，这对我不起作用。有谁知道如何做到这一点？我不想拥有所有圆圈，我想要不同的形状，具体取决于示例中谷物的品牌名称。谢谢。

编辑：我尝试看看这个：

过滤 d3 中的数据以绘制圆形或方形

但我无法让它发挥作用

Answer 1

首先，您必须设置symbol生成器（在 d3 v4.x 中）：

var symbol = d3.symbol();

然后附加一个path元素：

var dots = svg.selectAll(".dots")
    .data(data)
    .enter()
    .append("path");

之后，是最重要的部分：您必须指定type符号生成器的。在下面的演示中，我们可以根据品牌设置形状name（我使用的是我在网上找到的有关巧克力的数据集）：

dots.attr("d", symbol.type(function(d){
    if(d.name == "Lindt"){ return d3.symbolCross
    } else if (d.name == "Bournville"){ return d3.symbolDiamond
    } else if (d.name == "Dolfin"){ return d3.symbolSquare
    } else if (d.name == "Hershey"){ return d3.symbolStar
    } else if (d.name == "Galaxy"){ return d3.symbolTriangle
    } else if (d.name == "Dairy Milk"){ return d3.symbolCircle
}}))

当然，您可以避免if...else在数据集本身中定义符号类型的丑陋行为，或者仅使用序数比例。

检查工作演示（manufacturer改为使用，以减少形状）：

var symbol = d3.symbol();

var dots = svg.selectAll(".dots")
    .data(data)
    .enter()
    .append("path");