调整 d3.js 个条形图的大小

Question

我正在研究 d3.js 库和 svg。我在根据 svg-wrapper 的宽度（或 window 的宽度）调整简单条形图的大小时遇到问题，在我的例子中是 div.barchart.

我想完成什么？我需要：

svg 的高度 = const（在我的例子中，我将其作为数据数组中对象数量的函数）
svg 的宽度 = 变量 - 当前 div.barchart 宽度的函数（当用户调整 window 浏览器的大小时）。

我正在寻求帮助如何做到这一点。我的代码在下面或这里 http://codepen.io/Balzzac/pen/ZWEOGa:

html/css

<div class="barchart"></div>

.barchart
{
    width: calc(100%);
    height: auto;
}

JS

 var myArrayOfObjects = [
    {kind: 1,  name: "A", y: 400},
    {kind: 1,  name: "B", y: 400},
    {kind: 2,  name: "C", y: 350},
    {kind: 2,  name: "D", y: 350},
    {kind: 2,  name: "E", y: 350},
    {kind: 3,  name: "G", y: 300},
    {kind: 4,  name: "I", y: 250},
    {kind: 4, name: "J", y: 250},
    {kind: 5,  name: "K", y: 200}
];

var lengthOfArray = myArrayOfObjects.length;
var width = $(".barchart").width();
var height = Math.round(lengthOfArray * 40);
var barPadding = 0.1;
//margin
var marginLeft = 120;
var marginTop = 0;
var marginRight = 200;
var marginBottom = 0;
var margin = { left: marginLeft , top: marginTop, right: marginRight, bottom: marginBottom};

//data
var yColumn = "name";
var xColumn = "y";
var colorColumn = "kind";

//size of canvas
var innerWidth = width - margin.left - margin.right;
var innerHeight = height - margin.top - margin.bottom;


var svg = d3.select(".barchart").append("svg")
.attr("width", width)
.attr("height", height);


var group = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xAxisG = group.append("g")
.attr ("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")"); 
var yAxisG = group.append("g")
.attr ("class", "y axis");

//scales
var xScale = d3.scale.linear().range( [0, innerWidth]);
var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);
var colorScale = d3.scale.category10();
//axes
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.ticks(5)                   
.outerTickSize(0);         
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.outerTickSize(0);         


function render(data)
{
    xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
    yScale.domain(data.map( function (d){ return d[yColumn]; }));

    //xAxisG.call(xAxis);
    yAxisG.call(yAxis);
    //bind data
    var bars = group.selectAll("rect").data(data);
    //enter
    bars.enter().append("rect")
        .attr("height", yScale.rangeBand());
    //update
    bars
        .attr("x", 0)
        .attr("y",     function (d){ return yScale(d[yColumn]); })
        .attr("width", function (d){ return xScale(d[xColumn]); })
        .attr("fill" , function (d) {return colorScale(d[colorColumn]);});

    //exit
    bars.exit().remove();

}

render(myArrayOfObjects);

Answer 1

var myArrayOfObjects = [
 {kind: 1,  name: "A", y: 400},
 {kind: 1,  name: "B", y: 400},
 {kind: 2,  name: "C", y: 350},
 {kind: 2,  name: "D", y: 350},
 {kind: 2,  name: "E", y: 350},
 {kind: 3,  name: "G", y: 300},
 {kind: 4,  name: "I", y: 250},
 {kind: 4, name: "J", y: 250},
 {kind: 5,  name: "K", y: 200}
];

var lengthOfArray = myArrayOfObjects.length;
var width = $(".barchart").width();
var height = Math.round(lengthOfArray * 40);
var barPadding = 0.1;
//margin
var marginLeft = 120;
var marginTop = 0;
var marginRight = 200;
var marginBottom = 0;
var margin = { left: marginLeft , top: marginTop, right: marginRight, bottom: marginBottom};

//data
var yColumn = "name";
var xColumn = "y";
var colorColumn = "kind";

//size of canvas
var innerWidth = width - margin.left - margin.right;
var innerHeight = height - margin.top - margin.bottom;

//html part
var svg = d3.select(".barchart").append("svg")
.attr("width", width) //strange resize with 100%
.attr("height", height);
//.attr("viewBox", "0 0 " + width + " " + height) //does strange resize
//.attr("preserveAspectRatio", "xMinYMid meet"); //does strange resize


var group = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xAxisG = group.append("g")
.attr ("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")"); 
var yAxisG = group.append("g")
.attr ("class", "y axis");

//scales
var xScale = d3.scale.linear().range( [0, innerWidth]);
var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);
var colorScale = d3.scale.category10();
//axes
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.ticks(5)                   // Use approximately 5 ticks marks.
.tickFormat(d3.format("s")) // Use intelligent abbreviations, e.g. 5M for 5 Million
.outerTickSize(0);          // Turn off the marks at the end of the axis.
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.outerTickSize(0);          // Turn off the marks at the end of the axis.


function render(data)
{
 xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
 yScale.domain(data.map( function (d){ return d[yColumn]; }));

 //xAxisG.call(xAxis);
 yAxisG.call(yAxis);
 //bind data
 var bars = group.selectAll("rect").data(data);
 //enter
 bars.enter().append("rect")
  .attr("height", yScale.rangeBand());
 //update
 bars
  .attr("x", 0)
  .attr("y",     function (d){ return yScale(d[yColumn]); })
  .attr("width", function (d){ return xScale(d[xColumn]); })
  .attr("fill" , function (d) {return colorScale(d[colorColumn]);});

 //exit
 bars.exit().remove();

}

render(myArrayOfObjects);
function initializeWH(){
 width = ($(".barchart").width());
 height = Math.round(lengthOfArray * 40);
 innerWidth = width - margin.left - margin.right;
 innerHeight = height - margin.top - margin.bottom;
 xScale = d3.scale.linear().range( [0, innerWidth]);
 yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);
 console.log(width);
 console.log(height);
}
$(window).on('resize', function(){
 initializeWH();
 render(myArrayOfObjects);
});

*
{
 margin: 0;
 padding: 0;
 font-size: 0;
 border: none;
}
.barchart
{
 width: calc(100%);
 height: auto;
 background: #eee;
/*  outline: 1px solid black; */
 
}

.axis text
{
 font: 16px sans-serif;
}

.axis path, .axis line
{
 fill: none;
 stroke: #ddd;
 stroke-width: 2px;
 shape-rendering: crispEdges;
}

/* .x.axis path, .x.axis line
{
 stroke: none;
}
 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="barchart"></div>

在这里你需要做一些事情，那些是 1) 在 window 调整大小时，您需要计算 div 的当前宽度和高度，并根据这些值计算 innerWidth 和 innerHeight，然后更新比例 xScale 和 yScale。 2) 现在用更新后的宽度和高度生成条形图。

为了执行这些任务，我添加了代码

function initializeWH(){ width = ($(".barchart").width()); height = Math.round(lengthOfArray * 40); innerWidth = width - margin.left - margin.right; innerHeight = height - margin.top - margin.bottom; xScale = d3.scale.linear().range( [0, innerWidth]); yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding); console.log(width); console.log(height); } $(window).on('resize', function(){ initializeWH(); render(myArrayOfObjects); });

希望你明白了。

代码已更新http://codepen.io/anon/pen/KzKLEz

调整 d3.js 个条形图的大小

Resize of d3.js barchart

jquery

svg

resize

window-resize

d3.js