Fatal编程技术网
  • javascript/
  • Javascript D3可以'；不要把两支刷子画在一起

Javascript D3可以'；不要把两支刷子画在一起

javascript d3.js

Javascript D3可以'；不要把两支刷子画在一起,javascript,d3.js,Javascript,D3.js,因此，我尝试制作一些东西，用户可以拖动并在折线图中创建两个大小相等的画笔，问题是在我尝试绘制第二个画笔后，画笔消失了。我曾尝试创建单独的attr和单独的画笔调用，但仍然无法实现。 这是我的密码 有什么帮助吗 <!DOCTYPE html> <html> <head> <svg width="960" height="400"></svg> <meta charset="utf-8"> <titl

因此，我尝试制作一些东西，用户可以拖动并在折线图中创建两个大小相等的画笔，问题是在我尝试绘制第二个画笔后，画笔消失了。我曾尝试创建单独的attr和单独的画笔调用，但仍然无法实现。 这是我的密码

有什么帮助吗

    <!DOCTYPE html>
<html>
<head>
    <svg width="960" height="400"></svg>
  <meta charset="utf-8">
  <title>
    line chart with drag and drop
  </title>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="./line_graph.js"></script>
  <link rel="stylesheet" type= "text/css" href="./style.css">
</head>
<body>
</body>
</html>
css文件：

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.hover-line {
  stroke: #6F257F;
  stroke-width: 2px;
  stroke-dasharray: 3,3;
}
.area {
  fill: lightsteelblue;
}
.line{
  fill:none;
  stroke:brown;
  stroke-linejoin:round;
  stroke-linecap:round;
  stroke-width:1.5
}

.focus circle {
  fill: none;
  stroke: steelblue;
}
.brush {
  fill: grey;
  pointer-events: all;
  fill-opacity:0.3;
}

.resize  {
  fill: grey;
  pointer-events: all;
  fill-opacity:0.7;
}
考虑使用d3.jsv4

子笔刷是在父笔刷“end”事件处理程序中创建的，我们还需要禁用新的父笔刷选择

var parent_brush = d3.brushX()
  .extent([
    [margin.left, margin.top],
    [margin.left + width, margin.top + height]
  ])
  .on("end", brushedParent);
var child_brush;

svg.append("g")
  .attr("class", "parent")
  .call(parent_brush);

function brushedParent() {
  // remove new brush selection capture area
  svg.select('.parent .overlay').remove();

  if (!child_brush) {
    child_brush = d3.brushX()
      .extent([
        [margin.left, margin.top],
        [margin.left + width, margin.top + height]
      ])
      .on("end", brushedChild);

    svg.append("g")
      .attr("class", "child")
      .call(child_brush);
  }
}

function brushedChild() {
  // remove new brush selection capture area
  svg.select('.child .overlay').remove();

  child_selection = d3.brushSelection(svg.select('.child').node());

  var parent_selection = d3.brushSelection(svg.select('.parent').node());
  var parent_width = parent_selection[1] - parent_selection[0];
  var resized_child = [child_selection[0], child_selection[0] + parent_width];

  child_brush.on("end", null);
  child_brush.move(svg.select('.child'), resized_child);
}
以下是工作代码片段：

var数据=[1,5,2,7,4,7,8,9,5,3,6,8,2,3,5,9,8,5]
var svg=d3.选择（“svg”）
var保证金={
前100名，
底数：50，
左:100,，
右：0
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var x_extent=d3.extent（数据，函数（d，i）{
返回i
})
变量y_范围=d3.范围（数据，函数（d，i）{
返回d
})
x=d3.scaleLinear（）
.范围（[0，宽度]）
.域（x_范围）
y=d3.scaleLinear（）
.范围（[高度，0]）
.域（y_范围）
var line=d3.line（）
.x（功能（d，i）{
返回x（i）
})
.y（功能（d，i）{
返回y（d）
})
var xAxis=d3.axisBottom（x）；
var yAxis=d3.轴左（y）；
g、 附加（“路径”）
.attr（“类”、“行”）
.基准（数据）
.attr（“d”，行）
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移”（“+margin.left+”、“+（height+margin.top）+”））
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.呼叫（yAxis）；
var focus=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var=[]；
var parent_brush=d3.brushX（）
.范围([
[margin.left，margin.top]，
[margin.left+宽度，margin.top+高度]
])
.在（“结束”，拉丝父母）；
儿童牙刷；
svg.append（“g”）
.attr（“类”、“父类”）
.呼叫（家长刷子）；
函数brushedParent（）{
//删除新笔刷选择捕获区域
选择（'.parent.overlay'）.remove（）；
如果（！儿童画笔）{
child_brush=d3.brushX（）
.范围([
[margin.left，margin.top]，
[margin.left+宽度，margin.top+高度]
])
.在（“结束”，毛刷儿童）；
svg.append（“g”）
.attr（“类”、“子类”）
.呼叫（儿童刷子）；
}
}
函数brushedChild（）{
//删除新笔刷选择捕获区域
选择（'.child.overlay'）.remove（）；
child_selection=d3.brushSelection（svg.select（'.child'）.node（））；
var parent_selection=d3.brushSelection（svg.select（'.parent'）.node（））；
var parent_width=父_选择[1]-父_选择[0]；
var resized_child=[child_selection[0]，child_selection[0]+parent_width]；
子刷开启（“结束”，空）；
child_brush.move（svg.select（'.child'），调整大小的_child）；
}
。轴路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
.悬停线{
冲程：#6F257F；
笔画宽度：2px；
笔划数组：3，3；
}
.区域{
填充物：淡蓝色；
}
.线路{
填充：无；
笔画：棕色；
笔划线条连接：圆形；
笔划线头：圆形；
笔划宽度：1.5
}
.焦点圈{
填充：无；
笔画：钢蓝；
}
.刷子{
填充物：灰色；
指针事件：全部；
填充不透明度：0.3；
}
.调整大小{
填充物：灰色；
指针事件：全部；
填充不透明度：0.7；
}
考虑使用d3.js v4

子笔刷是在父笔刷“end”事件处理程序中创建的，我们还需要禁用新的父笔刷选择

var parent_brush = d3.brushX()
  .extent([
    [margin.left, margin.top],
    [margin.left + width, margin.top + height]
  ])
  .on("end", brushedParent);
var child_brush;

svg.append("g")
  .attr("class", "parent")
  .call(parent_brush);

function brushedParent() {
  // remove new brush selection capture area
  svg.select('.parent .overlay').remove();

  if (!child_brush) {
    child_brush = d3.brushX()
      .extent([
        [margin.left, margin.top],
        [margin.left + width, margin.top + height]
      ])
      .on("end", brushedChild);

    svg.append("g")
      .attr("class", "child")
      .call(child_brush);
  }
}

function brushedChild() {
  // remove new brush selection capture area
  svg.select('.child .overlay').remove();

  child_selection = d3.brushSelection(svg.select('.child').node());

  var parent_selection = d3.brushSelection(svg.select('.parent').node());
  var parent_width = parent_selection[1] - parent_selection[0];
  var resized_child = [child_selection[0], child_selection[0] + parent_width];

  child_brush.on("end", null);
  child_brush.move(svg.select('.child'), resized_child);
}
以下是工作代码片段：

var数据=[1,5,2,7,4,7,8,9,5,3,6,8,2,3,5,9,8,5]
var svg=d3.选择（“svg”）
var保证金={
前100名，
底数：50，
左:100,，
右：0
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var x_extent=d3.extent（数据，函数（d，i）{
返回i
})
变量y_范围=d3.范围（数据，函数（d，i）{
返回d
})
x=d3.scaleLinear（）
.范围（[0，宽度]）
.域（x_范围）
y=d3.scaleLinear（）
.范围（[高度，0]）
.域（y_范围）
var line=d3.line（）
.x（功能（d，i）{
返回x（i）
})
.y（功能（d，i）{
返回y（d）
})
var xAxis=d3.axisBottom（x）；
var yAxis=d3.轴左（y）；
g、 附加（“路径”）
.attr（“类”、“行”）
.基准（数据）
.attr（“d”，行）
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移”（“+margin.left+”、“+（height+margin.top）+”））
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.呼叫（yAxis）；
var focus=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var=[]；
var parent_brush=d3.brushX（）
.范围([
[margin.left，margin.top]，
[margin.left+宽度，margin.top+高度]
])
.在（“结束”，拉丝父母）；
儿童牙刷；
svg.append（“g”）
.attr（“类”、“父类”）
.呼叫（家长刷子）；
函数brushedParent（）{
//删除新笔刷选择捕获区域
选择（'.parent.overlay'）.remove（）；
如果（！儿童画笔）{
child_brush=d3.brushX（）
.范围([
[margin.left，margin.top]，
[margin.left+宽度，margin.top+高度]
])
.在（“结束”，毛刷儿童）；
svg.append（“g”）
.attr（“类”、“子类”）
.呼叫（儿童刷子）；
}
}
函数brushedChild（）{
//删除新笔刷选择捕获区域
选择（'.child.overlay'）.remove（）；
child_selection=d3.brushSelection（svg.select（'.child'）.node（））；
var parent_selection=d3.brushSelection（svg.select（'.parent'）.node（））；
var p