D3散点图,以不同的形状
问题描述:
我努力学习D3,我期待这个例子: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
但我无法得到这个工作
答
首先,你必须设置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 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>
我仍然困惑,如何 svg.selectAll 。数据(数据) 。进入() .append( “圆圈”) .attr( “类”, “点”) .attr( “R”,3.5) .attr( “CX”,XMAP ) .attr(“cy”,yMap) 可以更改。这是我想改变的主要部分,以反映您所做的事情。我能放置在.enter()之后完成的工作吗? –
对于使用d3.symbol,你必须追加路径,而不是圆圈。路径没有使用x,y,cx或cy定位。在链接中添加该代码并创建一个可运行的Plunker /小提琴/无论如何,我会为您更换它。 –
非常感谢Gerardo:https://plnkr.co/edit/BGJvgGIsPNCWX0d2iXYN?p=preview –