我根据收入（x轴）和国家（y轴）制作了一个条形图。我的条形图已经完成，但我想从下拉列表中选择多个国家/地区值，并根据这些值仅显示条形图那个国家应该被显示为其他人隐藏...对于单一选择我已经做了但是对于国家的多个值如何过滤并显示在D3 Js条形图中我被卡住了。 localDataJson包含数据：
localdatajson=[
{"Country";"USA","Revenue":"12","TurnOver":"16"},
{"Country";"Brazil","Revenue":"4.5","TurnOver":"16"},
{"Country";"Belzium","Revenue":"4.8","TurnOver":"16"},
{"Country";"Britain","Revenue":"20","TurnOver":"16"},
{"Country";"Canada","Revenue":"6.5","TurnOver":"16"},
{"Country";"DenMark","Revenue":"7.5","TurnOver":"16"}
]
text参数将是一个数组 例如。文本= [＆＃34;美国＆＃34;＆＃34;巴西＆＃34;＆＃34;英国＆＃34;] 我想只为这三个国家展示酒吧...... 这是我的代码
function revenueBar(localDataJson, text) {
var w = 400;
var h = 400;
var barPadding = 1;
var maxRevenue = 0;
var maxTurnOver = 0;
var padding = {
left: 45, right: 10,
top: 40, bottom: 60
}
var maxWidth = w - padding.left - padding.right;
var maxHeight = h - padding.top - padding.bottom;
for (var j = 0; j < localDataJson.length; j++) {
if (localDataJson[j].Revenue > maxRevenue) {
maxRevenue = localDataJson[j].Revenue;
}
}
for (var j = 0; j < localDataJson.length; j++) {
if (localDataJson[j].TurnOver > maxTurnOver) {
maxTurnOver = localDataJson[j].TurnOver;
}
}
var convert = {
x: d3.scale.ordinal(),
y: d3.scale.linear()
};
// Define your axis
var axis = {
x: d3.svg.axis().orient('bottom')
//y: d3.svg.axis().orient('left')
};
// Define the conversion function for the axis points
axis.x.scale(convert.x);
// axis.y.scale(convert.y);
// Define the output range of your conversion functions
convert.y.range([maxHeight, 0]);
convert.x.rangeRoundBands([0, maxWidth]);
convert.x.domain(localDataJson.map(function (d) {
return d.Country;
})
);
convert.y.domain([0, maxRevenue]);
$('#chartBar').html("");
var svg = d3.select("#chartBar")
.append("svg")
.attr("width", w)
.attr("height", h);
// The group node that will contain all the other nodes
// that render your chart
$('.bar-group').html("");
var chart = svg.append('g')
.attr({
class: 'container',
transform: function (d, i) {
return 'translate(' + padding.left + ',' + padding.top + ')';
}
});
chart.append('g') // Container for the axis
.attr({
class: 'x axis',
transform: 'translate(0,' + maxHeight + ')'
})
.call(axis.x)
.selectAll("text")
.attr("x", "-.8em")
.attr("y", ".15em")
.style("text-anchor", "end")
.attr("transform", "rotate(-65)");// Insert an axis inside this node
$('.axis path').css("fill", "none");
chart.append('g') // Container for the axis
// .attr({
// class: 'y axis',
// height: maxHeight,
// })
//.call(axis.y);
var bars = chart
.selectAll('g.bar-group')
.data(localDataJson)
.enter()
.append('g') // Container for the each bar
.attr({
transform: function (d, i) {
return 'translate(' + convert.x(d.Country) + ', 1)';
},
class: 'bar-group'
});
//Here goes filter thing ,bar of filter values will be shown others hide
if (text != "All" && text != "Clear Filter") {
svg.selectAll('g.bar-group')
.filter(function (d) {
return text != d.Country;
})
.attr("display", "none");
svg.selectAll('g.bar-group')
.filter(function (d) {
return text == d.Country;
})
.attr("display", "inline");
}
var color = d3.scale.category20();
// var color = d3.scale.ordinal()
// .range(['#f1595f', '#79c36a', '#599ad3', '#f9a65a', '#9e66ab','#cd7058']);
bars.append('rect')
.attr({
y: maxHeight,
height: 0,
width: function (d) { return convert.x.rangeBand(d) - 3; },
class: 'bar'
})
.transition()
.duration(1500)
.attr({
y: function (d, i) {
return convert.y(d.Revenue);
},
height: function (d, i) {
return maxHeight - convert.y(d.Revenue);
}
})
.attr("fill", function (d, i) {
// return color(i);
return color(d.Country);
})
// for (var i = 0; i < text.length; i++) {
// }
svg.append("text")
.attr("x", (w + padding.left + padding.right) / 2)
.attr("y", 25)
.attr("class", "title")
.attr("text-anchor", "middle")
.text("Revenue Bar Chart")
;
var svgs = svg.select("g.container").selectAll("text.label")
// svgs.selectAll("text")
.data(localDataJson)
.enter()
.append("text")
.classed("label", true)
//.transition() // <-- This is new,
// .duration(5000)
.text(function (d) {
return (d.Revenue);
})
.attr("text-anchor", "middle")
//// Set x position to the left edge of each bar plus half the bar width
.attr("x", function (d, i) {
// return (i * (w / localDataJson.length)) + ((w / localDataJson.length - barPadding) / 2);
return convert.x(d.Country) + (convert.x.rangeBand(d) - 3) / 2;
})
.attr({
y: function (d, i) {
return convert.y(d.Revenue) +20;
// return maxHeight;
},
})
.attr("font-family", "sans-serif")
.attr("font-size", "13px")
.attr("fill", "white")
}
答案 0 :(得分：0)
Garima你需要在使用display：none
隐藏栏的部分中这样做svg.selectAll('g.bar-group')
.filter(function (d) {
if(text.indexOf(d.Country) == -1)
return true;
else
return false;
})
.attr("display", "none");
注意：在此我假设文本是一个选定国家的数组，即使它只有一个选择。
希望这有帮助