当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - zoom map based on selected value on the drop down list

问题描述:

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...

分享给朋友:
您可能感兴趣的文章:
随机阅读: