Javascript d3.js-更新轴并更改路径宽度
我正在尝试更新轴的宽度,如下所示: 零宽度的初始设置:Javascript d3.js-更新轴并更改路径宽度,javascript,css,d3.js,Javascript,Css,D3.js,我正在尝试更新轴的宽度,如下所示: 零宽度的初始设置: var x2 = d3.scale.linear() .domain([0, 10]) .range([0, 0]) .clamp(true); svg.append("g") .attr("class", "x axis2") .attr("transform", "translate(0," + height / 2 + ")") .cal
var x2 = d3.scale.linear()
.domain([0, 10])
.range([0, 0])
.clamp(true);
svg.append("g")
.attr("class", "x axis2")
.attr("transform", "translate(0," + height / 2 + ")")
.call(d3.svg.axis()
.scale(x2)
.orient("bottom")
.tickFormat(function(d) { return d; })
.tickSize(0)
.tickPadding(12))
.select(".domain")
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "bar-highlight");
稍后我想更新路径的宽度(如果有一个很好的过渡就好了)。我试过这本书中的建议,但没有成功:
x2 = d3.scale.linear()
.domain([0, data.page_count])
.range([0, 15])
.clamp(true);
d3.selectAll("g.x.axis2")
.call(x2);
您需要在轴上调用
d3.svg.axis().scale(x2)
,而不仅仅是x2
。以下更新过程适用于我(尽管在空绘图上):
// Update the range of existing variable, x2
x2.range([0, 15]);
// Select and change the axis in D3
d3.selectAll("g.x.axis2")
.call(d3.svg.axis().scale(x2));