Jquery d3js矩形svg的过渡高度onload
我有一个正在工作的js FIDLE,它修改svg rect元素来模拟条形图。我想做的是让条形图上的负荷过渡到一个特定的基础高度。当滑动条移动时,图形会移动,但当页面首次加载时,图形不会移动 它是开着的 这是我的密码Jquery d3js矩形svg的过渡高度onload,jquery,svg,d3.js,slider,transition,Jquery,Svg,D3.js,Slider,Transition,我有一个正在工作的js FIDLE,它修改svg rect元素来模拟条形图。我想做的是让条形图上的负荷过渡到一个特定的基础高度。当滑动条移动时,图形会移动,但当页面首次加载时,图形不会移动 它是开着的 这是我的密码 $("#slider").slider({ max: 30 }); $("#slider").slider({ min: 10 }); $("#slider1").slider({ max: 25 }); $("#slider1").slider({
$("#slider").slider({
max: 30
});
$("#slider").slider({
min: 10
});
$("#slider1").slider({
max: 25
});
$("#slider1").slider({
min: 10
});
$("#slider, #slider1").slider({
value: 10,
animate: "fast" ,
slide: function (event, ui) {
var selection = $("#slider").slider("value");
var selection1 = $("#slider1").slider("value");
$( "#amount1" ).val( "$" + selection );
$( "#amount" ).val( "$" + selection1 );
//console.log(selection);
console.log(selection1);
//Width and height
var w = 200;
var h = 2000;
//Data
var dataset = [];
var dataset1 = [];
//Basic Maths Here
dataset.push(selection * selection1);
dataset1.push(selection * 2);
console.log(dataset);
console.log(dataset1);
var rectangle = svg.selectAll("rect")
.classed("collapse", true)
.data(dataset);
var rectangle1 = svg1.selectAll("rect")
.classed("collapse1", true)
.data(dataset1);
rectangle
.enter()
.append("rect");
rectangle1
.enter()
.append("rect");
rectangle.attr("width", 200)
.transition()
.attr("height", function (d) { console.log('d is ' + d);
return d;
})
.attr("x", function (d) {
return 40;
})
.attr("y", function (d) {
return 40;
});
rectangle1.attr("width", 200)
.transition()
.attr("height", function (d) { console.log('d is ' + d);
return d;
})
.attr("x", function (d) {
return 40;
})
.attr("y", function (d) {
return 40;
});
}
});
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 300);
//Create SVG element
var svg1 = d3.select("body")
.append("svg")
.classed("svgLeft", true)
.attr("width", 300)
.attr("height", 300);
//initialize a fake graph
var selection = 10;
var selection1 = 10;
$( "#amount1" ).val( "$" + selection );
$( "#amount" ).val( "$" + selection1 );
//console.log(selection);
console.log(selection1);
//Width and height
var w = 200;
var h = 2000;
//Data
var dataset = [];
var dataset1 = [];
//Basic Maths Here
dataset.push(selection);
dataset1.push(selection1);
console.log(dataset);
console.log(dataset1);
var rectangle = svg.selectAll("rect")
.classed("collapse", true)
.data(dataset);
var rectangle1 = svg1.selectAll("rect")
.classed("collapse1", true)
.data(dataset1);
rectangle
.enter()
.append("rect");
rectangle1
.enter()
.append("rect");
rectangle.attr("width", 200)
.transition()
.attr("height", 40)
.attr("fill", "#92BAF5")
.attr("x", function (d) {
return 40;
})
.attr("y", function (d) {
return 40;
});
rectangle1.attr("width", 200)
.transition()
.attr("fill", "#E6E6E6")
.attr("height", 40)
.attr("x", function (d) {
return 40;
})
.attr("y", function (d) {
return 40;
});
这只是在过渡之前设置初始高度的问题。像这样:
rectangle.attr("width", 200)
.attr("height", 0)
.transition().duration(750).ease("linear")
.attr("height", 40)
...
完成。下面的回复中的转换是否是您所寻找的?