目前，我已经使用D3.js实现了动画图表，动画图基于jQuery滑块进行动画制作。我实现的所有功能都在工作，我只想让这个图表在响应模式下完美运行。这是相同的plnkr：http://plnkr.co/edit/fbgrMZXwfmuuZajOotgl?p=preview
另外，请查看下表的代码：
<html lang="en">
<head>
<style>
div#slider {
width: 500px;
margin-left: 17%;
height: 5px;
margin-top: 4%;
margin-bottom: 30px;
}
svg {
margin-left: 8%;
}
.x-axis {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.y-axis {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.year-bar {
width: 130%;
float: left;
margin-left: -15px;
margin-top: 20px
}
.years {
width: auto;
float: left;
margin-right: 68px;
font-size: 13px
}
.age-bar {
z-index: 1;
width: 20%;
float: left;
left: 20%;
margin-top: 35px;
}
.age {
width: auto;
float: left;
margin-right: 4px;
font-size: 15px;
}
.xwidth {
stroke-width: 2px;
}
.ywidth {
stroke-width: 2px;
}
path.domain {
fill: none;
stroke: #CCC;
stroke-width: 1px;
}
</style>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="d3@*" data-semver="3.5.3" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<div id="slider">
<div class="year-bar">
<span class="years">2000</span>
<span class="years">2010</span>
<span class="years">2020</span>
<span class="years">2030</span>
<span class="years">2040</span>
<span class="years">2050</span>
</div>
</div>
<!--/*<div class="age-bar">
<span class="age">100+</span><br/>
<span class="age">80-89</span><br/>
<span class="age">60-69</span><br/>
<span class="age">40-49</span><br/>
<span class="age">20-29</span><br/>
<span class="age">0-9</span><br/>*/-->
<script>
$(function() {
var extensionMethods = {
pips: function(settings) {
options = {
first: "number", // "pip" , false
last: "number", // "pip" , false
rest: "pip" // "number" , false
};
$.extend(options, settings);
// get rid of all pips that might already exist.
this.element.addClass('ui-slider-pips').find('.ui-slider-pip').remove();
// we need teh amount of pips to create.
var pips = this.options.max - this.options.min;
// for every stop in the slider, we create a pip.
for (i = 0; i <= pips; i++) {
// hold a span element for the pip
var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">' + i + '</span></span>');
// add a class so css can handle the display
// we'll hide numbers by default in CSS, and show them if set.
// we'll also use CSS to hide the pip altogether.
if (0 == i) {
s.addClass('ui-slider-pip-first');
if ("number" == options.first) {
s.addClass('ui-slider-pip-number');
}
if (false == options.first) {
s.addClass('ui-slider-pip-hide');
}
} else if (pips == i) {
s.addClass('ui-slider-pip-last');
if ("number" == options.last) {
s.addClass('ui-slider-pip-number');
}
if (false == options.last) {
s.addClass('ui-slider-pip-hide');
}
} else {
if ("number" == options.rest) {
s.addClass('ui-slider-pip-number');
}
if (false == options.rest) {
s.addClass('ui-slider-pip-hide');
}
}
// if it's a horizontal slider we'll set the left offset,
// and the top if it's vertical.
if (this.options.orientation == "horizontal")
s.css({
left: '' + (100 / pips) * i + '%'
});
else
s.css({
top: '' + (100 / pips) * i + '%'
});
// append the span to the slider.
this.element.append(s);
}
}
};
$.extend(true, $['ui']['slider'].prototype, extensionMethods);
$("#slider").slider({
min: 0,
max: 500,
step: 100,
create: function(event, ui) {
setTimeout(function() {
svg.selectAll("rect").attr("width", function(d) {
return (d.rate * d.mid1);
});
}, 100);
},
// on slide adjust width of all rects
slide: function(event, ui) {
svg.selectAll("rect")
.attr("width", function(d) {
if (ui.value >= 0 && ui.value <= 99) {
return (d.rate * d.mid1);
} else if (ui.value >= 100 && ui.value <= 199) {
return (d.rate * d.mid2);
} else if (ui.value >= 200 && ui.value <= 299) {
return (d.rate * d.mid3);
} else if (ui.value >= 300 && ui.value <= 399) {
return (d.rate * d.mid4);
} else if (ui.value >= 400 && ui.value <= 499) {
return (d.rate * d.mid5);
} else if (ui.value >= 500 && ui.value <= 599) {
return (d.rate * d.mid6);
}
/*else{
return Math.min(ui.value*d.rate, d.max);}*/
})
}
});
// create svg
var svg = d3.select("body")
.append("svg")
.attr("width", 740)
.attr("height", 800);
/**/
// add 4 rects
var data = [
{
row: 1,
rate: 1.0,
mid1: 0,
mid2: 0,
mid3: 0,
mid4: 1,
mid5: 1,
mid6: 2
},
{
row: 2,
rate: 1.0,
mid1: 4,
mid2: 5,
mid3: 8,
mid4: 11,
mid5: 17,
mid6: 26
},
{
row: 3,
rate: 1.0,
mid1: 30,
mid2: 41,
mid3: 49,
mid4: 63,
mid5: 87,
mid6: 115
},
{
row: 4,
rate: 1.0,
mid1: 97,
mid2: 108,
mid3: 125,
mid4: 163,
mid5: 201,
mid6: 217
},
{
row: 5,
rate: 1.0,
mid1: 167,
mid2: 182,
mid3: 228,
mid4: 269,
mid5: 283,
mid6: 309
},
{
row: 6,
rate: 1.0,
mid1: 234,
mid2: 286,
mid3: 325,
mid4: 334,
mid5: 356,
mid6: 350
},
{
row: 7,
rate: 1.0,
mid1: 343,
mid2: 381,
mid3: 381,
mid4: 398,
mid5: 384,
mid6: 372
},
{
row: 8,
rate: 1.0,
mid1: 445,
mid2: 436,
mid3: 444,
mid4: 420,
mid5: 400,
mid6: 396
},
{
row: 9,
rate: 1.0,
mid1: 504,
mid2: 503,
mid3: 464,
mid4: 434,
mid5: 422,
mid6: 400
},
{
row: 10,
rate: 1.0,
mid1: 577,
mid2: 522,
mid3: 476,
mid4: 454,
mid5: 423,
mid6: 404
},
{
row: 11,
rate: 1.0,
mid1: 599,
mid2: 535,
mid3: 497,
mid4: 454,
mid5: 426,
mid6: 411
},
];
svg.selectAll("g")
.data(data)
.enter()
.append("rect")
.attr("x", 40)
.attr("y", function(d) {
return d.row * 30;
})
.attr("height", 25)
.attr("width", 0)
.style("fill", "rgb(5, 106, 181)")
.style("margin-top", 35)
.attr("transform", "translate(30,5)");
var ydata = [{
"val": "0-9"
}, {
"val": "10-19"
}, {
"val": "20-29"
}, {
"val": "30-39"
}, {
"val": "40-49"
}, {
"val": "50-59"
}, {
"val": "60-69"
}, {
"val": "70-79"
}, {
"val": "80-89"
}, {
"val": "90-99"
}, {
"val": "100+"
}];
//add x and y axis
var x = d3.scale.linear()
.range([0, 600]);
var y = d3.scale.ordinal().domain(ydata.map(function(d) {
return d.val;
})).rangePoints([300, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4)
.tickFormat(function(d) {
return d + "%";
});
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
.tickPadding(4)
x.domain([0, 20]);
svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(70,367)")
.call(xAxis).append("text")
.attr("transform", "rotate(0)")
.attr("y", 50)
.attr("x", 390)
.attr("dx", "-1.5em")
.style("text-anchor", "end")
.style("font-size", "15")
.style("color", "grey")
.text("Percentage of World Population");
svg.append("g")
.attr("class", "y-axis")
.attr("transform", "translate(70,50)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -57)
.attr("x", -140)
.attr("dx", "1.5em")
.style("text-anchor", "end")
.style("font-size", "15")
.style("color", "grey")
.text("Age Range");
});
</script>
</body>
</html>