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

しかし、これは私のためには機能しません。誰にどのようにこれを行うには洞察力を持っていますか？私はすべてのサークルを持つことを望んでいない、私は例では、シリアルのブランド名に応じて異なる形をしたい。ありがとうございました。

編集：私はこれを見てみました：

Filter data in d3 to draw either circle or square

しかし、私は、これは

Answer 1

はまず動作させることができなかった、あなたはD3のV4に（symbol発電機を設定する必要があります。 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 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") 
 
\t .append("svg") 
 
\t .attr("width", w) 
 
\t .attr("height", h); 
 
\t 
 
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") 
 
\t .data(data) 
 
\t .enter() 
 
\t .append("path"); 
 
\t 
 
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} })) 
 
\t .attr('fill', "teal") 
 
\t .attr('stroke','#000') 
 
\t .attr('stroke-width',1) 
 
\t .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>