在D3中根据自定义Y轴绘制叠加条形图,可以按照以下步骤进行:
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var xScale = d3.scaleBand()
.domain(data.map(function(d) { return d.x; }))
.range([0, width])
.padding(0.1);
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([height, 0]);
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.call(yAxis);
selectAll
和data
方法来绑定数据,并使用enter
方法来添加新的条形图。svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.x); })
.attr("y", function(d) { return yScale(d.y); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.y); })
.attr("fill", "steelblue");
至此,根据自定义Y轴绘制叠加条形图的过程就完成了。根据具体需求,可以进一步调整样式、添加动画、优化性能等。
领取专属 10元无门槛券
手把手带您无忧上云