Fatal编程技术网
  • svg/
  • Svg 用新的替换d3.js路径转换？

Svg 用新的替换d3.js路径转换？

svg d3.js

Svg 用新的替换d3.js路径转换？,svg,d3.js,Svg,D3.js,我见过一些问题和例子，但没有帮助。我正在尝试最后一个例子，5秒后，我希望正在绘制的曲线路径完全消失，5秒后，我希望创建一条新路径 我尝试了下面的代码，但尽管整个svg元素本身被删除，但当我使用appendGraph（）再次创建svg和路径时，相同的旧路径重新出现。如何确保完全删除旧路径，并且在删除图形时也不会调用tick函数 小提琴在这里： 代码是： <html> <head> <meta http-equiv="Content-Type" content="tex

我见过一些问题和例子，但没有帮助。我正在尝试最后一个例子，5秒后，我希望正在绘制的曲线路径完全消失，5秒后，我希望创建一条新路径

我尝试了下面的代码，但尽管整个
svg
元素本身被删除，但当我使用appendGraph（）再次创建
svg
和路径时，相同的旧路径重新出现。如何确保完全删除旧路径，并且在删除图形时也不会调用tick函数

小提琴在这里：

代码是：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style>
svg {
  font: 10px sans-serif;
}

.noselect {
/* these are to disable text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  opacity: 0.5;
  shape-rendering: crispEdges;
}

rect.zoom {
stroke: steelblue;
fill-opacity: 0.3;
}

#placeholder {margin: 10px 5px 15px 70px;}

</style>

<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>

</head>
<body>
<div id="placeholder" ></div>
<script>
//---------globals
var timer = null, interval = 500, value = 0;
var value1 = 0;
var n = 143, duration = interval, now = new Date(Date.now() - duration), count = 0, data = d3.range(n).map(function() { return 0; });

var margin = {top: 20, right: 40, bottom: 50, left: 60}, width = 580 - margin.right, height = 420 - margin.top - margin.bottom;
var x = d3.time.scale().domain([now - (n - 2) * duration, now - duration]).range([0, width]);
var y = d3.scale.linear().domain([-1, 1]).range([height, 0]);

var line = d3.svg.line().interpolate("basis")
            .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
            .y(function(d, i) { return y(d); });
var svg, path, yaxis, axis;



//--------program starts
appendGraph();
tick();
value1 = 0;
setTimeout(function() {removeGraph();}, 5000);
setTimeout(function() {addGraphAgain();}, 10000);



//-------------------------------functions -------------------------------
function appendGraph()
{
  svg = d3.select("body").select("#placeholder").append("p").append("svg:svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("id", "mainSVG")
    .style("margin-left", -margin.left + "px")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

axis = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));

yaxis = svg.append("g")
    .attr("class", "y axis")
    .call(y.axis = d3.svg.axis().scale(y).orient("left"));

path = svg.append("g")
    .attr("clip-path", "url(#clip)")
  .append("path")
    .data([data])
    .attr("id", "line1")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("stroke-width", "1.5px")
    .style("visibility","visible");

}//appendGraph

//TODO: These tick functions could be simplified to handle more lines on the graph
function tick() 
{
  // push the accumulated count onto the back, and reset the count
  value1 = Math.random() * 100;
  if (value1 >= 0) {data.push(value1);} else {data.push(0);}//ensure that no NaN or undefined values corrupt the range

  // update the domains
  now = new Date();
  x.domain([now - (n - 2) * duration, now - duration]);

  count = 0;
  // redraw the lines
  svg.select("#line1").attr("d", line).attr("transform", null);

  // slide the line left
  path.transition().duration(duration).ease("linear").attr("transform", "translate(" + x(now - (n - 1) * duration) + ")").each("end", tick);
  y.domain([0, 100]);
  y = d3.scale.linear().domain([0, 100]).range([height, 0]);      
  yaxis.call(y.axis = d3.svg.axis().scale(y).orient("left"));  

  // pop the old data point off the front
  data.shift();
  console.log("tick being called");
}

function removeGraph()
{
    path.transition().duration(0).each(function() { this.__transition__.active = 0; });//at least this is stopping tick from being called   
    svg.selectAll("*").remove();
    //-------tried these too
//  d3.select("#mainSVG").remove("svg");
//  d3.select("#line1").remove("path");
//  path.remove();
    //d3.selectAll("path").attr("d", "Z");
    console.log("REMOVED");
}//removeGraph

function addGraphAgain()
{
    appendGraph();

    tick();

    value1 = 0; 
    console.log("ADDED AGAIN");
}//addGraphAgain
</script>
</body>
</html>


svg{
字体：10px无衬线；
}
noselect先生{
/*这些选项用于禁用文本选择*/
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
不透明度：0.5；
形状渲染：边缘清晰；
}
矩形缩放{
笔画：钢蓝；
填充不透明度：0.3；
}
#占位符{边距：10px 5px 15px 70px；}
//---------全球的
var定时器=null，间隔=500，值=0；
var值1=0；
var n=143，duration=interval，now=newdate（Date.now（）-duration），count=0，data=d3.range（n）.map（函数（）{return 0；}）；
var margin={top:20，right:40，bottom:50，left:60}，width=580-margin.right，height=420-margin.top-margin.bottom；
var x=d3.time.scale（）.domain（[now-（n-2）*duration，now-duration]）.range（[0，width]）；
变量y=d3.scale.linear（）.domain（[-1，1]）.range（[height，0]）；
var line=d3.svg.line（）.interpolate（“基础”）
.x（函数（d，i）{返回x（现在-（n-1-i）*持续时间）；}）
.y（函数（d，i）{返回y（d）；}）；
var svg，路径，yaxis，轴；
//--------节目开始
appendGraph（）；
勾选（）；
值1=0；
setTimeout（函数（）{removeGraph（）；}，5000）；
setTimeout（函数（）{addGraphAgain（）；}，10000）；
//-------------------------------功能-------------------------------
函数appendGraph（）
{
svg=d3。选择（“正文”）。选择（“占位符”）。追加（“p”）。追加（“svg:svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.attr（“id”、“mainSVG”）
.style（“左边距”、-margin.left+“px”）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
axis=svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（x.axis=d3.svg.axis（）.scale（x.orient（“底部”））；
yaxis=svg.append（“g”）
.attr（“类”、“y轴”）
.call（y.axis=d3.svg.axis（）.scale（y.orient（“left”））；
path=svg.append（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）
.append（“路径”）
.数据（[数据]）
.attr（“id”、“第1行”）
.attr（“填充”、“无”）
.attr（“笔划”、“黑色”）
.attr（“笔划宽度”，“1.5px”）
.风格（“可见性”、“可见”）；
}//附属器
//TODO:这些勾号函数可以简化为处理图形上的更多线
函数tick（）
{
//将累积计数推回，并重置计数
value1=数学随机（）*100；
如果（value1>=0）{data.push（value1）；}否则{data.push（0）；}//请确保没有NaN或未定义的值损坏范围
//更新域
现在=新日期（）；
x、 域（[现在-（n-2）*持续时间，现在-持续时间]；
计数=0；
//重新画线
svg.select（“#line1”）.attr（“d”，line）.attr（“transform”，null）；
//把线滑到左边
path.transition（）；
y、 域（[01100]）；
y=d3.scale.linear（）.domain（[01100]）range（[height，0]）；
yaxis.call（y.axis=d3.svg.axis（）.scale（y.orient（“左”））；
//将旧数据点从前面弹出
data.shift（）；
console.log（“被调用的勾号”）；
}
函数removGraph（）
{
path.transition（）.duration（0）.each（function（）{this.\uu transition\uu.active=0；}）；//至少这阻止了tick被调用
svg.selectAll（“*”）.remove（）；
//-------我也试过了
//d3.选择（“主svg”）。删除（“svg”）；
//d3.选择（“#line1”）。删除（“路径”）；
//path.remove（）；
//d3.选择全部（“路径”）.attr（“d”、“Z”）；
控制台日志（“删除”）；
}//再描记器
函数addGraphAgain（）
{
appendGraph（）；
勾选（）；
值1=0；
console.log（“再次添加”）；
}//阿德格拉法根
这不是对这个问题的确切答案，但因为我问这个问题的原因是因为我想有一个阶段，在这个阶段，我想向图形发送空输入，除了删除该行并用新行替换它之外，似乎没有其他方法

处理d3.js中的null或NaN数据或丢失数据，或者暂时不显示数据的技巧是使用

它的一个工作示例，在行转换中，它是这样的：
如果（计数器%5==0）ran=null，我在
处提供一个随机数；数据推送（ran）
和
.defined（函数（d）{return d！=null；}）
通过不在那里划线来处理null

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var n = 40,
    random = d3.random.normal(0, .2),
    data = d3.range(n).map(random);

var margin = {top: 20, right: 20, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, n - 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([-1, 1])
    .range([height, 0]);

var line = d3.svg.line()
    .defined(function(d) { return d != null; })
    .x(function(d, i) { return x(i); })
    .y(function(d, i) { return y(d); });

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 + ")");

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));

var path = svg.append("g")
    .attr("clip-path", "url(#clip)")
  .append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

var counter = 0;    
tick();

function tick() 
{
  // push a new data point onto the back
  var ran = random();
  counter++;
  if (counter%5==0) ran = null;
  data.push(ran);

  // redraw the line, and slide it to the left
  path
      .attr("d", line)
      .attr("transform", null)
    .transition()
      .duration(500)
      .ease("linear")
      .attr("transform", "translate(" + x(-1) + ",0)")
      .each("end", tick);

  // pop the old data point off the front
  data.shift();
}

</script>


svg{
字体：10px无衬线；
}
.线路{
填充：无；
行程：#000；
笔划宽度：1.5px；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
var n=40，
随机=d3.随机.正常（0.2），
数据=d3.范围（n）.地图（随机）；
var margin={顶部：20，右侧：20，底部：20，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.linear（）
.domain（[0，n-1]）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.domain（[-1，1]）
.范围（[高度，0]）；
var line=d3.svg.line（）
.defined（函数（d）{返回d！=null；}）
.x（函数（d，i）{返回x（i）；}）
.y（函数（d，i）{返回y（d）；