D3js：在每个条形图上缩放轴

Question

我正在建立一个带有水平条和每个条轴的d3js图表。 这是jsfiddle http://jsfiddle.net/juri33/r5tkL8L1/

现在通过此功能完成缩放

xScale.domain([0, d3.max(data, function(d) {
return d.initvalue * 2;
})]);

我想在具有不同值的每个条上缩放->每个条都应该有另一个轴。

我怎样才能做到这一点？ 有任何想法吗？

Answer 1

这是一个快速解决方案，可分别缩放每个轴：

// an array of scales
// that's 5% larger then the data is representing
var xs = data.map(function(d,i){
    return d3.scale
    .linear()
    .range([0, width])
    .domain([0, d.restlifetime + (d.restlifetime * 0.05)]);
});

// set width with appropriate scale
bar.append("rect")
  .attr("width", function(d,i) {
    return xs[i](d.restlifetime);
  })
  .attr("height", barHeight - 1);

// draw an axis for each scale
bar.append("g")
  .attr("class", "x axis")
  .attr("transform", function(d, i) {
    return "translate(0, " + scaleOffset + ")";
  })
  .each(function(d,i){
    d3.select(this)
        .call(d3.svg.axis()
        .scale(xs[i])
        .orient("bottom"));
  });

---

完整代码：

 var margin = { top: 50, right: 50, bottom: 50, left: 50 }, width = 500 - margin.left - margin.right, barHeight = 20, barOffset = 30, scaleOffset = 19; var data = [{ bearingname: "B1", restlifetime: 1000 }, { bearingname: "B2", restlifetime: 100 }, { bearingname: "B3", restlifetime: 400 }, { bearingname: "B4", restlifetime: 300 }]; var x = d3.scale.linear() .range([0, width]); var chart = d3.select(".chart") .attr("width", width + margin.left + margin.right + 300) .attr("height", function(d, i) { return (barHeight + barOffset) * data.length + margin.top + margin.bottom; }) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var xs = data.map(function(d,i){ return d3.scale .linear() .range([0, width]) .domain([0, d.restlifetime + (d.restlifetime * 0.05)]); }); var bar = chart.selectAll("g") .data(data) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * (barHeight + barOffset) + ")"; }); bar.append("rect") .attr("width", function(d,i) { return xs[i](d.restlifetime); }) .attr("height", barHeight - 1); bar.append("g") .attr("class", "x axis") .attr("transform", function(d, i) { return "translate(0, " + scaleOffset + ")"; }) .each(function(d,i){ d3.select(this) .call(d3.svg.axis() .scale(xs[i]) .orient("bottom")); }); bar.append("text") .attr("x", function(d,i) { return xs[i](d.restlifetime) - 3; }) .attr("y", barHeight / 2) .attr("dy", ".35em") .text(function(d) { return d.restlifetime + " h"; }); bar.append("text") .attr("x", 520) .attr("y", barHeight / 2) .attr("dy", ".35em") .style("fill", "black") .text(function(d) { return d.bearingname; }); bar.append("text") .attr("x", 600) .attr("y", barHeight / 2) .attr("dy", ".35em") .style("fill", "black") .html("S 0, min"); 

 .chart rect { fill: green; } .chart text { fill: white; font: 10px sans-serif; text-anchor: end; } .bar text { fill: black; } .axis text { font: 10px sans-serif; fill: black; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg class="chart"></svg>