D3.js csv Interactivity的过滤器 [英] D3.js csv Filter for Interactivity
本文介绍了D3.js csv Interactivity的过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我刚刚接触d3.js& html和我找不到我的问题的答案。
I'm new to d3.js & html and I could not find an answer to my problem yet.
我有这个数组我想在时间图上绘制。
这是带有标记的国家/地区的CSV，我要过滤
I have this Array I want to plot on a time graph. This is the CSV with marked countries i want to filter
如您所见，您无法识别哪些圈子属于哪个国家/地区。我想整合一些mousevents等来区分圈子。
As you may see you can't recognize which circles belong to which country. I wanted to integrate some mousevents etc. to distinguish the circles.
- 但我不知道如何从.csv筛选原籍国，我该怎么办？
- 我想从Origin中获取条目，以便我可以将圈子分组到国家/地区。如果我要属性不透明度/颜色，这将是正确的方式吗？）
body,
html {
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
font-size: 0.95em;
text-align: center;
}
#chart {
background-color: #F5F2EB;
border: 1px solid #CCC;
}
.bar {
fill: purple;
shape-rendering: crispEdges;
}
.bar-label {
fill: black;
text-anchor: middle;
font-size: 18px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.gridline path,
.gridline line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning D3</title>
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<!--Place all DOM elements here -->
<script>
d3.csv("refugee_data.csv", function(d) {
return {
date: d.Year + "/" + d.Month,
origin: d.Origin,
asylum: d.Asylum,
value: +d.Value
};
}, function(error, rows) {
console.log(rows);
render(rows)
});
function render(data) {
var w = 800;
var h = 450;
var margin = {
top: 100,
bottom: 0,
left: 80,
right: 40
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dateParser = d3.time.format("%Y/%B").parse;
var x = d3.time.scale()
.domain(d3.extent(data, function(d) {
var date = dateParser(d.date);
return date;
}))
.range([0 + margin.left, width]);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) {
return d.value;
})])
.range([height, 0 + margin.top]);
//range([0, height]);
//enter()
svg.selectAll(".point")
.data(data)
.enter()
.append("circle")
.classed("point", true)
.attr("r", 2);
//Update
svg.selectAll(".point")
.attr("cx", function(d) {
var date = dateParser(d.date);
return x(date);
})
.attr("cy", function(d) {
return y(d.value);
})
//Exit()
svg.selectAll(".point")
.data(data)
.exit()
.remove();
}
</script>
</body>
</html>
基本上我想实现这种情节。
var data = [{
glazed: 3.14,
jelly: 4.43,
powdered: 2.43,
sprinkles: 3.86,
age: 18,
responses: 7
}, {
glazed: 3.00,
jelly: 3.67,
powdered: 2.67,
sprinkles: 4.00,
age: 19,
responses: 3
}, {
glazed: 2.00,
jelly: 4.00,
powdered: 2.33,
sprinkles: 4.33,
age: 20,
responses: 3
}, {
glazed: 3.50,
jelly: 4.50,
powdered: 1.00,
sprinkles: 3.50,
age: 21,
responses: 2
}, {
glazed: 2.83,
jelly: 3.50,
powdered: 1.83,
sprinkles: 4.50,
age: 22,
responses: 6
}, {
glazed: 3.25,
jelly: 4.75,
powdered: 2.25,
sprinkles: 3.50,
age: 23,
responses: 4
}, {
glazed: 1.50,
jelly: 4.00,
powdered: 2.50,
sprinkles: 4.00,
age: 25,
responses: 2
}, {
glazed: 1.67,
jelly: 3.00,
powdered: 1.33,
sprinkles: 4.00,
age: 26,
responses: 3
}, {
glazed: 2.50,
jelly: 4.00,
powdered: 1.00,
sprinkles: 4.50,
age: 27,
responses: 2
}, {
glazed: 3.00,
jelly: 4.33,
powdered: 1.33,
sprinkles: 4.33,
age: 28,
responses: 3
}, {
glazed: 5.00,
jelly: 4.00,
powdered: 1.00,
sprinkles: 4.00,
age: 29,
responses: 1
}, {
glazed: 5.00,
jelly: 5.00,
powdered: 2.00,
sprinkles: 5.00,
age: 30,
responses: 1
}, {
glazed: 1.50,
jelly: 4.50,
powdered: 3.00,
sprinkles: 4.75,
age: 31,
responses: 4
}, {
glazed: 3.67,
jelly: 3.33,
powdered: 1.67,
sprinkles: 4.67,
age: 32,
responses: 3
}, {
glazed: 2.00,
jelly: 4.50,
powdered: 1.00,
sprinkles: 5.00,
age: 33,
responses: 2
}, {
glazed: 2.75,
jelly: 3.75,
powdered: 2.50,
sprinkles: 4.50,
age: 34,
responses: 4
}, {
glazed: 4.00,
jelly: 3.00,
powdered: 2.75,
sprinkles: 4.25,
age: 35,
responses: 4
}, {
glazed: 1.50,
jelly: 3.00,
powdered: 4.00,
sprinkles: 4.00,
age: 36,
responses: 2
}, {
glazed: 3.00,
jelly: 3.00,
powdered: 3.50,
sprinkles: 4.00,
age: 37,
responses: 2
}, {
glazed: 4.00,
jelly: 2.00,
powdered: 3.33,
sprinkles: 4.67,
age: 39,
responses: 3
}, {
glazed: 3.50,
jelly: 3.00,
powdered: 4.00,
sprinkles: 4.50,
age: 40,
responses: 2
}, {
glazed: 2.75,
jelly: 2.75,
powdered: 4.00,
sprinkles: 4.25,
age: 41,
responses: 4
}, {
glazed: 2.25,
jelly: 2.50,
powdered: 1.75,
sprinkles: 4.25,
age: 42,
responses: 4
}, {
glazed: 1.00,
jelly: 2.00,
powdered: 1.00,
sprinkles: 5.00,
age: 43,
responses: 1
}, {
glazed: 2.00,
jelly: 3.00,
powdered: 3.67,
sprinkles: 3.33,
age: 44,
responses: 3
}, {
glazed: 3.33,
jelly: 2.33,
powdered: 3.33,
sprinkles: 3.33,
age: 46,
responses: 3
}, {
glazed: 2.25,
jelly: 4.00,
powdered: 2.75,
sprinkles: 3.00,
age: 47,
responses: 4
}, {
glazed: 3.75,
jelly: 2.00,
powdered: 3.00,
sprinkles: 2.75,
age: 48,
responses: 4
}, {
glazed: 2.75,
jelly: 2.00,
powdered: 3.75,
sprinkles: 3.25,
age: 49,
responses: 4
}, {
glazed: 2.67,
jelly: 2.67,
powdered: 1.67,
sprinkles: 3.67,
age: 51,
responses: 3
}, {
glazed: 2.50,
jelly: 2.50,
powdered: 4.00,
sprinkles: 3.00,
age: 52,
responses: 2
}, {
glazed: 3.00,
jelly: 3.67,
powdered: 4.67,
sprinkles: 2.67,
age: 53,
responses: 3
}, {
glazed: 5.00,
jelly: 5.00,
powdered: 5.00,
sprinkles: 3.50,
age: 54,
responses: 2
}, {
glazed: 2.33,
jelly: 1.67,
powdered: 2.33,
sprinkles: 3.33,
age: 55,
responses: 3
}, {
glazed: 3.00,
jelly: 2.00,
powdered: 3.00,
sprinkles: 3.00,
age: 56,
responses: 1
}, {
glazed: 2.00,
jelly: 2.00,
powdered: 2.00,
sprinkles: 4.00,
age: 57,
responses: 1
}, {
glazed: 1.25,
jelly: 2.00,
powdered: 3.00,
sprinkles: 1.75,
age: 59,
responses: 4
}, {
glazed: 2.50,
jelly: 2.50,
powdered: 4.00,
sprinkles: 2.50,
age: 60,
responses: 2
}, {
glazed: 2.33,
jelly: 2.33,
powdered: 2.67,
sprinkles: 3.00,
age: 61,
responses: 3
}, {
glazed: 2.25,
jelly: 2.50,
powdered: 3.75,
sprinkles: 3.00,
age: 62,
responses: 4
}, {
glazed: 1.50,
jelly: 3.00,
powdered: 3.00,
sprinkles: 2.00,
age: 63,
responses: 2
}, {
glazed: 2.00,
jelly: 3.00,
powdered: 3.40,
sprinkles: 2.40,
age: 64,
responses: 5
}, {
glazed: 2.00,
jelly: 1.00,
powdered: 4.50,
sprinkles: 2.00,
age: 65,
responses: 2
}, {
glazed: 2.00,
jelly: 1.67,
powdered: 4.00,
sprinkles: 1.67,
age: 66,
responses: 3
}, {
glazed: 1.50,
jelly: 1.75,
powdered: 3.75,
sprinkles: 2.25,
age: 67,
responses: 4
}, {
glazed: 2.00,
jelly: 2.50,
powdered: 4.25,
sprinkles: 2.00,
age: 68,
responses: 4
}, {
glazed: 3.00,
jelly: 2.00,
powdered: 3.00,
sprinkles: 3.00,
age: 70,
responses: 1
}, {
glazed: 2.33,
jelly: 2.67,
powdered: 4.33,
sprinkles: 2.33,
age: 71,
responses: 3
}, {
glazed: 3.00,
jelly: 2.50,
powdered: 3.75,
sprinkles: 2.00,
age: 72,
responses: 4
}, {
glazed: 2.00,
jelly: 2.50,
powdered: 4.50,
sprinkles: 2.50,
age: 73,
responses: 2
}, {
glazed: 3.00,
jelly: 2.00,
powdered: 4.00,
sprinkles: 1.50,
age: 74,
responses: 2
}];
body,
html {
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
font-size: 0.95em;
text-align: center;
}
#chart {
background-color: #F5F2EB;
border: 1px solid #CCC;
}
.bar {
fill: purple;
shape-rendering: crispEdges;
}
.bar-label {
fill: black;
text-anchor: middle;
font-size: 18px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.gridline path,
.gridline line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.trendline {
fill: none;
stroke: #ccc;
stroke-width: 4px;
}
.area {
opacity: 0.25;
fill: #ccc;
stroke: #ccc;
stroke-width: 1px;
}
.donut {
opacity: 0.1;
}
.highlight {
opacity: 1;
cursor: hand;
}
.axis-label {
text-anchor: middle;
}
.chart-header {
text-transform: capitalize;
font-size: 125%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning D3</title>
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<!--Place all DOM elements here -->
<script type="text/javascript" src="survey_data.js"></script>
<script>
var w = 800;
var h = 450;
var margin = {
top: 60,
bottom: 80,
left: 100,
right: 80
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h);
var chart = svg.append("g")
.classed("display", true)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tickValues = [18, 25, 32, 39, 46, 53, 60, 67, 74];
var colorScale = d3.scale.category10();
var x = d3.scale.linear()
.domain(d3.extent(data, function(d) {
return d.age;
}))
.range([0, width]);
var y = d3.scale.linear()
.domain([1, 5])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickValues(tickValues)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.ticks(5)
.tickSize(20)
.tickFormat(function(d) {
return d.toFixed(1);
})
.orient("left");
var xGridlines = d3.svg.axis()
.scale(x)
.tickValues(tickValues)
.tickSize(height, height)
.tickFormat("")
.orient("bottom");
var yGridlines = d3.svg.axis()
.scale(y)
.tickSize(-width, 0, 0)
.tickFormat("")
.orient("left");
var responseScale = d3.scale.linear()
.domain(d3.extent(data, function(d) {
return d.responses;
}))
.range([2, 15]);
var initialize = 1;
function drawAxis(params) {
if (initialize) {
this.append("g")
.call(params.gridlines.x)
.classed("gridline x", true)
.attr("transform", "translate(" + 0 + "," + 0 + ")");
this.append("g")
.call(params.gridlines.y)
.classed("gridline y", true)
.attr("transform", "translate(" + 0 + "," + 0 + ")");
this.append("g")
.call(params.axis.x)
.classed("axis x", true)
.attr("transform", "translate(" + 0 + "," + height + ")");
this.append("g")
.call(params.axis.y)
.classed("axis y", true)
.attr("transform", "translate(" + 0 + "," + 0 + ")");
this.select(".y.axis")
.append("text")
.classed("y axis-label", true)
.attr("transform", "translate(" + -56 + "," + height / 2 + ") rotate(-90)")
.text("Rating (1=Low, 5=High)");
this.select(".x.axis")
.append("text")
.classed("x axis-label", true)
.attr("transform", "translate(" + width / 2 + "," + 48 + ")")
.text("Customer age");
this.append("g")
.append("text")
.classed("chart-header", true)
.text("")
.attr("transform", "translate(0," + -24 + ")")
initialize = 0;
}
}
function plot(params) {
var self = this;
//Get each of the donut types
var donuts = d3.keys(params.data[0]).filter(function(d) {
return d !== "age" && d !== "responses";
});
drawAxis.call(this, params);
//Create a group for each type of donut
this.selectAll(".donut")
.data(donuts)
.enter()
.append("g")
.attr("class", function(d) {
return d;
})
.classed("donut", true);
this.selectAll(".donut")
.style("fill", function(d, i) {
return colorScale(i);
})
.on("mouseover", function(d, i) {
d3.select(this)
//.classed("highlight", true)
.transition()
.style("opacity", 1);
})
.on("mouseout", function(d, i) {
d3.select(this)
//.classed("highlight", false)
.transition()
.style("opacity", 0.1);
});
donuts.forEach(function(donut) {
var g = self.selectAll("g." + donut);
var arr = params.data.map(function(d) {
return {
key: donut,
value: d[donut],
age: d.age,
responses: d.responses
};
});
//Setup circles
g.selectAll(".response")
.data(arr)
.enter()
.append("circle")
.classed("response", true);
//Update circles
g.selectAll(".response")
.attr("r", function(d) {
return responseScale(d.responses);
})
.attr("cx", function(d) {
return x(d.age);
})
.attr("cy", function(d) {
return y(d.value);
})
.on("mouseover", function(d, i) {
var str = d.key + " Donut: ";
str += "Age: " + d.age + ", ";
str += "Responses: " + d.responses + ", ";
str += "Average Rating: " + d.value;
str += ""
d3.select(".chart-header").text(str);
})
.on("mouseout", function(d, i) {
d3.select(".chart-header").text("");
});
//Remove any unbound elements
g.selectAll(".response").data(arr).exit().remove();
});
}
plot.call(chart, {
data: data,
gridlines: {
x: xGridlines,
y: yGridlines
},
axis: {
x: xAxis,
y: yAxis
}
});
</script>
</body>
</html>
推荐答案
要过滤数据以便只包含特定源的数据，可以使用 filter 函数。此函数接受一个参数，这是另一个函数，将为您要包括的所有数据点返回true，为要排除的所有数据点返回false。例如，如果您希望以德国为原点的圈子，您可以这样做：
To filter your data so that you just have data from a specific origin, you can use the filter function. This function takes one argument, which is another function that will return true for all data points you want to include and false for all data points you want to exclude. For instance, if you want the circles that have Germany as their origin, you could do this:
var germany = svg.selectAll(".point")
.filter(function(d) {return d.Origin == "Germany"});
至于设置颜色和不透明度，它看起来不像你在任何地方在你的样式表中，你没有circle元素或.point类的任何样式）。由于你只想更改一部分圈子的颜色和不透明度，最好的办法是使用d3的 style（）函数，它可以更改数据的样式点。例如，如果您想使所有以德国为其原点的数据点的圆圈为红色且完全不透明，您可以这样做：
As for setting color and opacity, it doesn't look like you're doing that anywhere (even in your stylesheet, you don't have any styles for "circle" elements or the ".point" class). Since you want to just change the color and opacity for a subset of your circles, your best bet is to use d3's style() function, which lets you change the style of data points. For instance, if you wanted to make all of the circles representing data points with Germany as their origin be red and completely opaque, you could do this:
germany.style（fill，red）。style（opacity，1）;
想要根据其来源对所有圈子进行着色，您可以跳过过滤步骤，然后使用颜色标度立即为所有圈子着色：
Alternatively, if you wanted to color all circles based on their origin, you could skip the filtering step and use a color scale to color all of them at once:
//creates a scale to assign colors
var colorScale = d3.scale.category10();
//Then apply it to all points by assigning
// fill based on a callback function
svg.selectAll(".point")
.style("fill", function(d){return colorScale(d.Origin)});
这篇关于D3.js csv Interactivity的过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![这是带有标记的国家/地区的CSV，我要过滤](\"http://i.stack.imgur.com/A0yIM.jpg\"){kind=link}
![这是我现在的情节的一个例子](\"http://i.stack.imgur.com/4MM31.png\"){kind=link}