Svg D3条形图转换混淆
我是一个D3初学者（有着粗糙的训练轮），正在寻求剪辑方面的帮助。我希望看到我的图表两端的条形图整齐地进出，就像Mike Bostock的“条形图，第2部分”（我从中获取了他的一些代码，并将其与我自己的代码相结合）。我最困惑的是评论中的内容。为代码板道歉，我不确定问题的根源是什么。非常感谢Svg D3条形图转换混淆,svg,d3.js,clipping,Svg,D3.js,Clipping,我是一个D3初学者（有着粗糙的训练轮），正在寻求剪辑方面的帮助。我希望看到我的图表两端的条形图整齐地进出，就像Mike Bostock的“条形图，第2部分”（我从中获取了他的一些代码，并将其与我自己的代码相结合）。我最困惑的是评论中的内容。为代码板道歉，我不确定问题的根源是什么。非常感谢 <!DOCTYPE html> <html> <head> <title>Animated bar chart</title>
<!DOCTYPE html>
<html>
<head>
<title>Animated bar chart</title>
<meta charset="UTF-8" />
</head>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 8pt;
line-height: 12pt;
background: #ffffff;
color: #555555;
}
.axis path, .axis line {
fill: none;
stroke: #555555;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: orange;
stroke-width: 1px;
}
.bar {
fill: orange;
shape-rendering: crispEdges;
}
.x.axis.path {
display: none;
}
</style>
<body>
<h4>Animated bar chart</h4>
<script type="text/javascript" src="d3.v3.min.js"></script>
<script>
var t = -1;
var v = 0;
var data = d3.range(20).map(next);
function next () {
return {
time: ++t,
value: v = Math.floor(Math.random()*20)
};
}
setInterval(function () {
data.shift();
data.push(next());
redraw();
}, 1500);
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 20])
.range([0, width]);
var barWidth = (width / 20) - 5;
var y = d3.scale.linear()
.domain([0, 20])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* This definitiion by itself causes the first bar of chart to not appear
var defs = svg.append("defs");
defs.append("svg:clipPath")
.attr("id", "clip1");
This removes all the bars. Not sure where this should go?
var clip = svg.append("g")
.attr("clip-path", "url(#clip1)")
.append("svg:rect")
.attr("width", width)
.attr("height", height);
*/
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.time); })
.attr("width", barWidth)
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return (height - y(d.value)); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
function redraw()
{
var rect = svg.selectAll("rect")
.data(data, function(d) { return d.time; });
// initialise entering bars and then do the transition
rect.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d, i) { return x(i + 1); })
.attr("y", function(d) { return y(d.value); })
.attr("width", barWidth)
.attr("height", function(d) { return (height - y(d.value)); })
.transition()
.duration(1000)
.attr("x", function(d, i) { return x(i); });
// transition entering and updating bars
rect.transition()
.duration(1000)
.attr("x", function(d, i) { return x(i); });
// transition exiting bars
rect.exit()
.transition()
.duration(1000)
.attr("x", function(d, i) { return x(i - 1); })
.remove();
}
</script>
</body>
</html>
动画条形图
身体{
字体系列：Verdana，无衬线；
字号：8pt；
线高：12pt；
背景：#ffffff；
颜色：#555555；
}
.轴路径，.轴线{
填充：无；
冲程：#555555；
形状渲染：边缘清晰；
}
.线路{
填充：无；
笔画：橙色；
笔画宽度：1px；
}
.酒吧{
填充物：橙色；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}
动画条形图
var t=-1；
var v=0；
var数据=d3.范围（20）.映射（下一步）；
函数next（）{
返回{
时间：++t，
值：v=Math.floor（Math.random（）*20）
};
}
setInterval（函数（）{
data.shift（）；
data.push（next（））；
重画（）；
}, 1500);
var margin={顶部：20，右侧：20，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.linear（）
.domain（[0,20]）
.范围（[0，宽度]）；
变压杆宽度=（宽度/20）-5；
变量y=d3.scale.linear（）
.domain（[0,20]）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
/*此定义本身导致图表的第一个条形图不出现
var defs=svg.append（“defs”）；
defs.append（“svg:clipPath”）
.attr（“id”、“clip1”）；
这将删除所有条。不知道该放在哪里？
var clip=svg.append（“g”）
.attr（“剪辑路径”、“url（#clip1）”）
.append（“svg:rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
*/
svg.selectAll（“rect”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回x（d.time）；}）
.attr（“宽度”，barWidth）
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“height”，函数（d）{return（height-y（d.value））；}）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
函数重画（）
{
var rect=svg.selectAll（“rect”）
.data（数据，函数（d）{返回d.time；}）；
//初始化输入栏，然后进行转换
rect.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d，i）{返回x（i+1）；}）
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“宽度”，barWidth）
.attr（“height”，函数（d）{return（height-y（d.value））；}）
.transition（）
.持续时间（1000）
.attr（“x”，函数（d，i）{返回x（i）；}）；
//转换输入和更新栏
rect.transition（）
.持续时间（1000）
.attr（“x”，函数（d，i）{返回x（i）；}）；
//过渡出口杆
rect.exit（）
.transition（）
.持续时间（1000）
.attr（“x”，函数（d，i）{返回x（i-1）；}）
.remove（）；
}
条形图从右向外向左过渡。x轴通过父变换与条形同步更新。剪切是通过为条和x轴添加额外的SVG实现的。不确定您在这里要做什么。代码导致第一个栏不出现，因为随后的语句
selectAll（“rect”）。数据（data）rect