-1
私は私の視覚化の中で、承認された大統領によってフィルタリングできるドロップダウンフィルタを実装したいと思います。しかし、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;})
});