Question

我正在学习d3.js库和svg。我在调整简单的条形图时遇到了问题，这个条形图是svg-wrapper宽度（或窗口宽度）的函数，在我的例子中它是div.barchart。

我想要完成什么？我需要：

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

我正在寻求帮助如何做到这一点。我的代码位于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

＆＃13;

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);
});

＆＃13;

*
{
	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;
}
 */

＆＃13;

<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>

＆＃13;

在这里你需要做一些事情，那些是 1）在窗口调整大小时，您需要计算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条形图

1 个答案: