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")

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

修改：我试着看一下：

Filter data in d3 to draw either circle or square

但我无法让这个工作

Answer 1

首先，您必须设置var dots = svg.selectAll(".dots") .data(data) .enter() .append("path");生成器（在d3 v4.x中）：

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 data = [{
    "name": "Dairy Milk",
        "manufacturer": "cadbury",
        "price": 45,
        "rating": 2
}, {
    "name": "Galaxy",
        "manufacturer": "Nestle",
        "price": 42,
        "rating": 3
}, {
    "name": "Lindt",
        "manufacturer": "Lindt",
        "price": 80,
        "rating": 4
}, {
    "name": "Hershey",
        "manufacturer": "Hershey",
        "price": 40,
        "rating": 1
}, {
    "name": "Dolfin",
        "manufacturer": "Lindt",
        "price": 90,
        "rating": 5
}, {
    "name": "Bournville",
        "manufacturer": "cadbury",
        "price": 70,
        "rating": 2
}];

var w = 300, h = 300;

var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);
	
var xScale = d3.scaleLinear().domain([0, d3.max(data, function(d){ return d.price})]).range([30,w*0.9]);

var yScale = d3.scaleLinear().domain([d3.max(data, function(d){ return d.rating})*1.1, 0]).range([10,h*0.9]);

var symbol = d3.symbol();

var dots = svg.selectAll(".dots")
	.data(data)
	.enter()
	.append("path");
	
dots.attr("d", symbol.type(function(d){if(d.manufacturer == "Lindt"){ return d3.symbolCross} else if (d.manufacturer == "cadbury"){ return d3.symbolDiamond} else if (d.manufacturer == "Nestle"){ return d3.symbolSquare} else if (d.manufacturer == "Hershey"){ return d3.symbolStar} }))
	.attr('fill', "teal")
	.attr('stroke','#000')
	.attr('stroke-width',1)
	.attr('transform',function(d){ return "translate("+xScale(d.price)+","+yScale(d.rating)+")"; });

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

var gX = svg.append("g")
  .call(xAxis)
  .attr("transform", "translate(0," + w*0.9 + ")");

var gY = svg.append("g")
  .call(yAxis)
  .attr("transform", "translate(30,0)");

当然，你可以避免那些丑陋的<script src="https://d3js.org/d3.v4.min.js"></script>在数据集本身中定义符号类型。

检查工作演示（改为使用(gdb) call calloc(1, 32)，以减少形状）：

calloc

libc.so.6

D3从各个圆圈到不同形状的散点图

1 个答案: