D3 从所有圆圈到不同形状的散点图
D3 Scatterplot from all circles to different shapes
我正在尝试学习 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")
.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>
我正在尝试学习 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")
.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>