D3.js 滚动条形图答案

【问题标题】：D3.js scrolling bar chartD3.js 滚动条形图
【发布时间】：2014-05-11 11:18:04
【问题描述】：

我有一个简单的条形图：

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 graph 如您所见，它非常混乱。我需要显示所有 lpu 标签。所以我想应该有一些滚动条，但我没有在图形上找到滚动条的好例子。有什么建议吗？这里是fiddle

【问题讨论】：

如果你包含一个带有 html 和 jquery 代码的 jsfiddle 会更容易。
检查我发布的答案，如果有帮助，请告诉我。我会尝试将 json 添加到您的小提琴中并更新您
好的，但是我已经添加了。改为变量 jsonlike
更新了答案中的小提琴.. 这是您更新的代码jsfiddle.net/efTr7/2
滚动更新jsfiddle.net/efTr7/4

标签： javascript jquery d3.js

【解决方案1】：

尝试如下

<div class="outer">
    <div class="inner"> 
      <div id="LPUgraph"> </div>
    </div>
</div>

<style>
.outer {
    width: 700px;
    height: 600px;
    overflow: auto;
}
.inner {
    width: 800px;
    height: 600px;
}
#LPUgraph{
    display: block;
    width: 100%;
    height: 100%;
}
</style>

jsfiddle sample

【讨论】：