问题描述:

Good day,

I am having trouble with the D3 map that i created. i want to zoom the world map not by clicking on the country but selecting on the drop down list of countries inside the drop down control.

here is my code..

 var dispatch = d3.dispatch("load", "countrychange");

d3.csv("data/ERSreputationBlocked.csv",type, function (error, country) {

if (error) throw error;

var countryById = d3.map();

country.forEach(function (d) { countryById.set(d.id, d); });

dispatch.load(countryById);

dispatch.countrychange(countryById.get("PH"));

//console.log(country);

});

dispatch.on("load.menu", function(countryById) {

var select = d3.select("body")

.append("div")

.append("select")

.on("change", function () { dispatch.countrychange(countryById.get(this.value)); });

select.selectAll("option")

.data(countryById.values())

.enter().append("option")

.attr("value", function (d) { return d.id; })

.text(function (d) { return d.Country; });

dispatch.on("countrychange.menu", function (country) {

select.property("value", country)

//loading the value based on the selected data

var svg1 = d3.select("body").append("svg1")

.attr("width", width)

.attr("height", height)

//end of selection

console.log(country);

});

});

//end of drop down

function type(d) {

d.total = d3.sum(d.value, function (k) { return d[k] = +d[k]; });

return d;

}

is there a way on how to manipulate this...

相关阅读:
Top