D3.js滚动条形图
我有一个简单的条形图：
var margin = {top: 20, right: 20, bottom: 30, left: 50}; var xLPU=d3.scale.ordinal(); var yLPU=d3.scale.linear(); var xLPUAxis = d3.svg.axis() .scale(xLPU) .orient("bottom"); var yLPUAxis = d3.svg.axis() .scale(yLPU) .orient("left") .ticks(10, "чел."); var LPUdivision=d3.select("#LPUgraph").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.json("LPUdivision.json",function(data){ xLPU.domain(data.map(function(d){return d.lpu;})) .rangeBands([0, width]); yLPU.domain([0,d3.max(data, function(d) { return d.amount; })]) .range([height,0]); LPUdivision.append("g") .attr("class","x axis") .attr("transform", "translate(0," + height + ")") .call(xLPUAxis); LPUdivision.append("g") .attr("class", "y axis") .call(yLPUAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("численность состава"); LPUdivision.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class","bar") .attr("x",function(d){return xLPU(d.lpu)}) .attr("width", xLPU.rangeBand()-5) .attr("y", function(d) { return yLPU(d.amount); }) .attr("height", function(d) { return height - yLPU(d.amount); }) .attr("fill","steelblue"); }); LPUdivision.json
[ {"lpu":"lpu1","amount":"20"}, {"lpu":"lpu2","amount":"40"}, {"lpu":"lpu3","amount":"60"}, {"lpu":"lpu4","amount":"10"}, {"lpu":"lpu5","amount":"80"}, {"lpu":"lpu6","amount":"30"}, {"lpu":"lpu7","amount":"20"}, {"lpu":"lpu8","amount":"40"}, {"lpu":"lpu9","amount":"60"}, {"lpu":"lpu10","amount":"10"}, {"lpu":"lpu11","amount":"80"}, {"lpu":"lpu12","amount":"30"}, {"lpu":"lpu13","amount":"20"}, {"lpu":"lpu14","amount":"40"}, {"lpu":"lpu15","amount":"60"}, {"lpu":"lpu16","amount":"10"}, {"lpu":"lpu17","amount":"80"}, {"lpu":"lpu18","amount":"30"} ]
这是输出图形： Lpu图表你可以看到它很乱。 我需要显示所有的lpu标签。 所以我想应该有一些滚动条，但我没有找到图形滚动条的好例子。 有什么建议吗？ 这是小提琴
请尝试以下方法
jsfiddle样本