Javascript d3.js化学管条形图
我对制作这种液体条形图很感兴趣。如图所示,指针/虚线标记向一侧移动 4月22日-处理动态数据的最新代码Javascript d3.js化学管条形图,javascript,d3.js,Javascript,D3.js,我对制作这种液体条形图很感兴趣。如图所示,指针/虚线标记向一侧移动 4月22日-处理动态数据的最新代码 最新条码 最新净化水波规范 //我想去掉这个水路密码 //进度表 此条形图的最新基本代码。 我已经将这两个图表合并在一起了——但是如果它是一个单独的svg,那么watercode的翻译是正确的——最好将这段代码清理/审查一下。此外,还应确保指针/标签能够调整/适应更多/更少的数据集 最新JSFIDLE var$this=$(“checmicalbars”); 风险值数据=[
最新条码 最新净化水波规范
//我想去掉这个水路密码 //进度表
此条形图的最新基本代码。
我已经将这两个图表合并在一起了——但是如果它是一个单独的svg,那么watercode的翻译是正确的——最好将这段代码清理/审查一下。此外,还应确保指针/标签能够调整/适应更多/更少的数据集 最新JSFIDLE
var$this=$(“checmicalbars”);
风险值数据=[{
“标签”:“渲染”,
“价值”:90,
“startcolor”:“c3da54”,
“endcolor”:“c1e500”
},
{
“标签”:“字符设计”,
“价值”:95,
“startcolor”:“e94adc”,
“endcolor”:“aae3dd”
},
{
“标签”:“草图”,
“价值”:80,
“startcolor”:“c3da54”,
“endcolor”:“fa5283”
},
{
“标签”:“故事板”,
“价值”:90,
“startcolor”:“e94adc”,
“endcolor”:“#f83b03”
},
{
“标签”:“图纸”,
“价值”:82,
“startcolor”:“c3da54”,
“endcolor”:“#f88504”
},
{
“标签”:“绘画”,
“价值”:90,
“startcolor”:“e94adc”,
“endcolor”:“f7d200”
}];
var h=450;
var w=400;
var barHeight=150;
var-barWidth=180;
变量选项={
最小限制:0,
最高限额:100
}
//设置比例
var x=d3.scale.ordinal()
.rangeRoundBands([0,线宽],.1);
变量y=d3.scale.linear()
.范围([barHeight,0]);
var xAxis=d3.svg.axis()
.scale(此.x)
.东方(“底部”);
var yAxis=d3.svg.axis()
.scale(this.y)
.东方(“左”);
//设置比例
//图表容器
var progresschart=d3.select($this[0]).append(“svg”)
.attr(“宽度”,w)
.attr(“高度”,h)
.附加(“g”)
.attr(“转换”、“翻译(0,5)”);
var barrectsholder=progresschart.append(“g”)
.attr(“类”、“barrectsholder”)
.attr(“转换”、“翻译(15,0)”);
var labelsholder=progresschart.append(“g”)
.attr(“类别”、“标签持有人”)
.attr(“变换”、“平移(10)”+(barHeight+20)+”);
var lineholder=progresschart.append(“g”)
.attr(“类别”、“持票人”)
.attr(“变换”、“平移(25)”+(barHeight+15)+”);
//图表容器
y、 域([options[“minlimit”]、options[“maxlimit”]);
/*
var gauge=barrectsholder
.附加(“g”)
.attr(“宽度”,config.w)
.attr(“高度”,配置h)
.附加(“g”);
液柱(仪表、配置);
*/
var bar=barrectsholder.selectAll(“svg”)
.数据(数据);
bar.enter()
.append(“svg”)
.attr(“类”,函数(d,i){
返回“bar”+i;
})
.attr(“宽度”,20)
.attr(“x”,函数(d,i){
返回30*i;
})
.attr(“y”,函数(d){
返回y(d值);
})
.attr(“高度”,功能(d){
返回杆高-y(d值);
})
$.each(数据、函数(索引、值){
//警报(索引+“:”+值);
变量配置={
w:20,
h:酒吧高度,
value:value.value,
振幅:0.02,//波高占波圆半径的百分比。
countPerWidth:1,//波圈每宽度的全波数。
riseTime:1000,//波浪从0上升到最终高度的时间量(毫秒)。
animateTime:1000,//整个波浪进入波浪圈的时间量(毫秒)。
上升:true,//控制波浪是从0上升到其全高,还是从其全高开始。
颜色转换:1000,
colorBefore:value.startcolor,//填充波之前的颜色。
colorAfter:value.endcolor,//填充波的颜色。
偏移量:0//最初偏移波浪的量。0=无偏移量。1=一个完整波浪的偏移量。
};
var gauge=barrectsholder.selectAll(“svg.bar”+索引)
液柱(仪表、配置);
});
/*
//__栅栏
var bar=barrectsholder.selectAll(“rect”)
.数据(数据);
//__进入
bar.enter()
.append(“rect”)
.attr(“类”、“条”)
.attr(“y”,酒吧高度);
//__更新
酒吧
.attr(“y”,酒吧高度)
.attr(“高度”,0)
.样式(“填充”,功能(d){
返回d.startcolor;
})
.transition()
.持续时间(2500)
.样式(“填充”,功能(d){
返回d.endcolor;
})
.attr(“宽度”,20)
.attr(“x”,函数(d,i){
返回30*i;
})
.attr(“y”,函数(d){
返回y(d值);
})
.attr(“高度”,功能(d){
返回杆高-y(d值);
})
//__出口
bar.exit()
.transition()
.持续时间(250)
.attr(“y”,0)
.attr(“高度”,0)
.remove();
//__栅栏
*/
//__标签
变量标签=标签架。选择全部(“文本”)
.数据(数据);
标签。输入()
.append(“文本”)
.attr(“类别”、“条形码标签”)
.attr(“x”,200)
.attr(“y”,函数(d,i){
返回20*i;
})
.文本(功能(d){
返回d.标签;
})
var lines=lineholder。选择全部(“文本”)
.数据(数据);
行。输入()
.append(“line”)//附加一行
.style(“笔划数组”(“3,3”))
.style(“笔划”、“黑色”)//为线条上色
.attr(“x1”,函数(d,i){
返回条宽度-(30*(i+1));
})//生产线第一端的x位置
.attr(“y1”,函数(d,i){
返回20*i;
})//线路第一端的y位置
.attr(“x2”,函数(d,i){
返回条宽度;
})//线路第二端的x位置
.attr(“y2”,函数(d,i){
返回20*i
var $this = $("#checmicalbars");
var data = [{
"label": "Rendering",
"value": 90,
"startcolor": "#c3da54",
"endcolor": "#c1e500"
},
{
"label": "Character Design",
"value": 95,
"startcolor": "#e94adc",
"endcolor": "#aae3dd"
},
{
"label": "Sketching",
"value": 80,
"startcolor": "#c3da54",
"endcolor": "#fa5283"
},
{
"label": "Story Boarding",
"value": 90,
"startcolor": "#e94adc",
"endcolor": "#f83b03"
},
{
"label": "Drawing",
"value": 82,
"startcolor": "#c3da54",
"endcolor": "#f88504"
},
{
"label": "Painting",
"value": 90,
"startcolor": "#e94adc",
"endcolor": "#f7d200"
}];
var h = 150;
var w = 300;
var options = {
minlimit: 0,
maxlimit: 100
}
// setup scales
var x = d3.scale.ordinal()
.rangeRoundBands([0, w], .1);
var y = d3.scale.linear()
.range([h, 0]);
var xAxis = d3.svg.axis()
.scale(this.x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(this.y)
.orient("left");
// setup scales
// chart container
var progresschart = d3.select($this[0]).append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(0,5)");
var barrectsholder = progresschart.append("g")
.attr("class", "chart")
.attr("transform", "translate(15,0)");
// chart container
y.domain([options["minlimit"], options["maxlimit"]]);
//__ bars
var bar = barrectsholder.selectAll("rect")
.data(data);
//__ enter
bar.enter()
.append("rect")
.attr("class", "bar")
.attr("y", h);
//__ update
bar
.attr("y", h)
.attr("height", 0)
.style("fill", function(d){
return d.startcolor;
})
.transition()
.duration(2500)
.style("fill", function(d){
return d.endcolor;
})
.attr("width", 20)
.attr("x", function(d, i) {
return 30 * i;
})
.attr("y", function(d) {
return y(d.value);
})
.attr("height", function(d) {
return h - y(d.value);
})
//__ exit
bar.exit()
.transition()
.duration(250)
.attr("y", 0)
.attr("height", 0)
.remove();
//__ bars
var $this = $("#checmicalbars");
var data = [{
"label": "Rendering",
"value": 90,
"startcolor": "#c3da54",
"endcolor": "#c1e500"
},
{
"label": "Character Design",
"value": 95,
"startcolor": "#e94adc",
"endcolor": "#aae3dd"
},
{
"label": "Sketching",
"value": 80,
"startcolor": "#c3da54",
"endcolor": "#fa5283"
},
{
"label": "Story Boarding",
"value": 90,
"startcolor": "#e94adc",
"endcolor": "#f83b03"
},
{
"label": "Drawing",
"value": 82,
"startcolor": "#c3da54",
"endcolor": "#f88504"
},
{
"label": "Painting",
"value": 90,
"startcolor": "#e94adc",
"endcolor": "#f7d200"
}];
var h = 450;
var w = 400;
var barHeight = 150;
var barWidth = 180;
var options = {
minlimit: 0,
maxlimit: 100
}
// setup scales
var x = d3.scale.ordinal()
.rangeRoundBands([0, barWidth], .1);
var y = d3.scale.linear()
.range([barHeight, 0]);
var xAxis = d3.svg.axis()
.scale(this.x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(this.y)
.orient("left");
// setup scales
// chart container
var progresschart = d3.select($this[0]).append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(0,5)");
var barrectsholder = progresschart.append("g")
.attr("class", "barrectsholder")
.attr("transform", "translate(15,0)");
var labelsholder = progresschart.append("g")
.attr("class", "labelsholder")
.attr("transform", "translate(10,"+(barHeight+ 20)+")");
var lineholder = progresschart.append("g")
.attr("class", "lineholder")
.attr("transform", "translate(25,"+(barHeight+ 15)+")");
// chart container
y.domain([options["minlimit"], options["maxlimit"]]);
/*
var gauge = barrectsholder
.append("g")
.attr("width", config.w)
.attr("height", config.h)
.append("g");
liquidBar(gauge, config);
*/
var bar = barrectsholder.selectAll("svg")
.data(data);
bar.enter()
.append("svg")
.attr("class", function(d, i) {
return "bar"+i;
})
.attr("width", 20)
.attr("x", function(d, i) {
return 30 * i;
})
.attr("y", function(d) {
return y(d.value);
})
.attr("height", function(d) {
return barHeight - y(d.value);
})
$.each(data, function( index, value ) {
//alert( index + ": " + value );
var config = {
w: 20,
h: barHeight,
value: value.value,
amplitude: 0.02, // The wave height as a percentage of the radius of the wave circle.
countPerWidth: 1, // The number of full waves per width of the wave circle.
riseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height.
animateTime: 1000, // The amount of time in milliseconds for a full wave to enter the wave circle.
rise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height.
colorTransition: 1000,
colorBefore: value.startcolor, // The color before of the fill wave.
colorAfter: value.endcolor, // The color after of the fill wave.
offset: 0 // The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.
};
var gauge = barrectsholder.selectAll("svg.bar"+index)
liquidBar(gauge, config);
});
/*
//__ bars
var bar = barrectsholder.selectAll("rect")
.data(data);
//__ enter
bar.enter()
.append("rect")
.attr("class", "bar")
.attr("y", barHeight);
//__ update
bar
.attr("y", barHeight)
.attr("height", 0)
.style("fill", function(d){
return d.startcolor;
})
.transition()
.duration(2500)
.style("fill", function(d){
return d.endcolor;
})
.attr("width", 20)
.attr("x", function(d, i) {
return 30 * i;
})
.attr("y", function(d) {
return y(d.value);
})
.attr("height", function(d) {
return barHeight - y(d.value);
})
//__ exit
bar.exit()
.transition()
.duration(250)
.attr("y", 0)
.attr("height", 0)
.remove();
//__ bars
*/
//__ labels
var labels = labelsholder.selectAll("text")
.data(data);
labels.enter()
.append("text")
.attr("class", "barlabels")
.attr("x", 200)
.attr("y", function(d, i) {
return 20 * i;
})
.text(function(d) {
return d.label;
})
var lines = lineholder.selectAll("text")
.data(data);
lines.enter()
.append("line")// attach a line
.style("stroke-dasharray", ("3, 3"))
.style("stroke", "black")// colour the line
.attr("x1", function(d, i) {
return barWidth-(30 * (i+1));
})//x pos of the 1st end of the line
.attr("y1", function(d, i) {
return 20 * i;
})//y pos of the 1st end of the line
.attr("x2", function(d, i) {
return barWidth;
})//x pos of the 2nd end of the line
.attr("y2", function(d, i) {
return 20 * i;
});//y pos of the 2nd end of the line
var lineHeights = 100;
lines.enter()
.append("line")// attach a line
.style("stroke-dasharray", ("3, 3"))
.style("stroke", "black")// colour the line
.attr("x1", function(d, i) {
return 30 * i;
})//x pos of the 1st end of the line
.attr("y1", function(d, i) {
return lineHeights - (20 * i);
})//y pos of the 1st end of the line
.attr("x2", function(d, i) {
return 30 * i;
})//x pos of the 2nd end of the line
.attr("y2", function(d, i) {
return -15;
});//y pos of the 2nd end of the line
function liquidBar(gauge, config) {
var fillPercent = Math.max(0, Math.min(100, config.value)) / 100;
var waveHeightScale = d3.scale.linear()
.range([0, config.amplitude, 0])
.domain([0, 50, 100]);
var waveHeight = (config.h / 2) * waveHeightScale(fillPercent * 100);
var waveLength = config.w / config.countPerWidth;
var waveClipCount = 1 + config.countPerWidth;
var waveClipWidth = waveLength * waveClipCount;
// Data for building the clip wave area.
var data = [];
for (var i = 0; i <= 40 * waveClipCount; i++) {
data.push({
x: i / (40 * waveClipCount),
y: (i / (40))
});
}
// Scales for controlling the size of the clipping path.
var waveScaleX = d3.scale.linear().range([0, waveClipWidth]).domain([0, 1]);
var waveScaleY = d3.scale.linear().range([0, waveHeight]).domain([0, 1]);
// Scales for controlling the position of the clipping path.
var waveRiseScale = d3.scale.linear()
// The clipping area size is the height of the fill circle + the wave height, so we position the clip wave
// such that the it will overlap the fill circle at all when at 0%, and will totally cover the fill
// circle at 100%.
.range([(config.h + waveHeight), (waveHeight)])
.domain([0, 1]);
var waveAnimateScale = d3.scale.linear()
.range([0, waveClipWidth - config.w]) // Push the clip area one full wave then snap back.
.domain([0, 1]);
// Center the gauge within the parent SVG.
var gaugeGroup = gauge.append("g")
.attr("class", "gaugeGroup")
.attr("transform", "translate(0,0)");
var randomId = Math.floor(Math.random() * 26) + Date.now();
// The clipping wave area.
var clipArea = d3.svg.area()
.x(function(d) {
return waveScaleX(d.x);
})
.y0(function(d) {
return waveScaleY(Math.sin(Math.PI * 2 * config.offset * -1 + Math.PI * 2 * (1 - config.countPerWidth) + d.y * 2 * Math.PI));
})
.y1(function(d) {
return (config.h + waveHeight);
});
var waveGroup = gaugeGroup.append("defs")
.append("clipPath")
.attr("id", "clipWave" + randomId);
var wave = waveGroup.append("path")
.datum(data)
.attr("d", clipArea)
.attr("T", 0);
// The inner circle with the clipping wave attached.
var fillGroup = gaugeGroup.append("g")
.attr("clip-path", "url(#clipWave" + randomId + ")");
fillGroup.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", config.w)
.attr("height", config.h)
.style("fill", config.colorBefore)
.transition()
.duration(config.colorTransition)
.style("fill", config.colorAfter);
// Make the wave rise. wave and waveGroup are separate so that horizontal and vertical movement can be controlled independently.
var waveGroupXPosition = config.w - waveClipWidth;
if (config.rise) {
waveGroup.attr('transform', 'translate(' + waveGroupXPosition + ',' + waveRiseScale(0) + ')')
.transition()
.duration(config.riseTime)
.attr('transform', 'translate(' + waveGroupXPosition + ',' + waveRiseScale(fillPercent) + ')')
.each("start", function() {
wave.attr('transform', 'translate(1,0)');
}); // This transform is necessary to get the clip wave positioned correctly when waveRise=true and waveAnimate=false. The wave will not position correctly without this, but it's not clear why this is actually necessary.
} else {
waveGroup.attr('transform', 'translate(' + waveGroupXPosition + ',' + waveRiseScale(fillPercent) + ')');
}
animateWave();
function animateWave() {
wave.attr('transform', 'translate(' + waveAnimateScale(wave.attr('T')) + ',0)');
wave.transition()
.duration(config.animateTime * (1 - wave.attr('T')))
.ease('linear')
.attr('transform', 'translate(' + waveAnimateScale(1) + ',0)')
.attr('T', 1)
.each('end', function() {
wave.attr('T', 0);
animateWave(config.animateTime);
});
}
}