我很乐意在我的可视化中实现一个下拉过滤器，允许我按照认可的总统进行过滤。然而，作为d3的新手，我真的很挣扎。我试图使用我在别处找到的代码来实现它，但无济于事。
var dataPath = "data/p.csv";
var dataPath2 = "data/e.csv";
var field1=[];
var field2=[];
d3.csv(dataPath2,function(data){
data.map(function(d){
field1.push(d.year);
field2.push(d.publication);
})
//called after the AJAX is success
console.log("field1",field1);
console.log("field2",field2);
console.log("field1",field1[0]);
var myData = data;
var margin = 150,
width = 1000 - margin,
height = 2000 - margin;
/*
* value accessor - returns the value to encode for a given data object.
* scale - maps value to a visual display encoding, such as a pixel position.
* map function - maps from data value to display value
* axis - sets up axis
*/
// setup x
var yValue = function(d) { return d.publication;}, // data -> value
yScale = d3.scale.ordinal().domain(field2).rangePoints([height, margin]); // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");
// setup y
var xValue = function(d) { return d.year;}, // data -> value
xExtent = d3.extent(data, function(d) {
return d.year;
});
xScale = d3.scale.linear().domain(xExtent).range([0,width-200]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
//
//
// // setup fill color
var cValue = function(d) { return d.endorsed;},
color = d3.scale.category10();
//
// // add the graph canvas to the body of the webpage
var svg = d3.select("body").append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append("g")
.attr("transform", "translate(150)");
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis
.ticks(12))
.append("text")
.attr("class", "label")
.attr("x", width-200)
.attr("y", -6)
.style("text-anchor", "end")
.text("Year");
//
// // y-axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis
.ticks(50))
.append("text")
.attr("class", "label")
// .attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Publication");
// draw dots
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 4)
.attr("x", width - 10)
.attr("y", 95)
.attr("cx", xMap )
.attr("cy", yMap)
.style("fill", function(d) { return color(cValue(d));})
// if (d.endorsed == "Clinton") { return "red"}
// else {return "black"}; })
.on("mouseover", function(d) {
tooltip.transition()
.duration(1000)
.style("opacity", .9);
tooltip.html( d.endorsed
)
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(1000)
.style("opacity", 0);
});
// draw legend
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
// draw legend colored rectangles
legend.append("rect")
.attr("x", width - 10)
.attr("y", 95)
.attr("width", 10)
.attr("height", 10)
.style("fill", color);
// draw legend text
legend.append("text")
.attr("x", width - 24)
.attr("y", 100)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d;})
});