Trung tâm cá nhân
sách gpt4 ăn đã đi

jquery - Nhóm vòng tròn đường dẫn vào/ra D3

In lại Tác giả: Walker 123 更新时间：2023-12-01 00:22:18 28 4
mua khóa gpt4 giày nike

我正在创建一个界面，用户可以通过该界面生成多系列折线图，并控制绘制哪些数据集。

要绘制哪些数据集由复选框控制。页面加载时，默认数据集以图表形式呈现，并且

$('input:checkbox.data-set-control').on('change')

图表已更新以添加或删除请求的数据集。

fiddle :Multi-series line chart with enter/exit transitions

我重构了代码以排除 d3.json() 请求，但一般功能保持不变。

我的问题是让代表一系列数据点的圆圈正确进入/退出。在我的服务器上，圆圈正确更新，但不退出。 (由于某种原因，更新和退出都无法在 Fiddle 中工作...)

我已经阅读并重读了 Mike 的所有有关 D3 更新/输入/退出功能的教程，此外还查看了我能找到的每个示例，甚至远程利用了折线图的更新/输入/退出。我相信我的问题在于我随后对圆圈进行操作的选择，尽管经过几个小时的修补后我似乎无法弄清楚正确的范围或结构或其他什么。

图表数据结构的简要总结:

data = [Object, Object, ...]

data[Object] = {
   name: dataSetName,
   data: [Object, Object, ...]
}

data[Object].data = [
   {
      x: val1,
      y: val2,
   }, ...
]

非常感谢在这种情况下理解更新/进入/退出的任何指导和指示。谢谢。

--尼尔·B.

câu trả lời hay nhất

这里有几个问题:

1.) 您没有处理 nodeGroup g 元素的进入/更新/退出模式。特别是现有的 g 存在问题。

2.) 当您选择圈子时，您正在使用 selectAll('.circle'):选择 lớp học 圈子的所有内容(不存在)。你的意思是 selectAll('circle'):选择 element 圆的所有内容。此外，我建议您在 nodeGroup Và dataNode 上使用类。当您继续构建图表时，它会导致更少的问题。

这里一切都已修复:




<đầu>
  
  
  



  

    

      

        

          Data sets
        

        

          

            
          

          

            
          

          

            
          

          

            
          

        

      

    

  

  

  

    

  

  
    dataSet1 = {
      name: 'dataSet1',
      data: [{
        x: 0,
        y: 19
      }, {
        x: 1,
        y: 16
      }, {
        x: 2,
        y: 21
      }, {
        x: 3,
        y: 24
      }, {
        x: 4,
        y: 19
      }, {
        x: 5,
        y: 18
      }, {
        x: 6,
        y: 22
      }]
    }

    dataSet2 = {
      name: 'dataSet2',
      data: [{
        x: 0,
        y: 26
      }, {
        x: 1,
        y: 23
      }, {
        x: 2,
        y: 29
      }, {
        x: 3,
        y: 34
      }, {
        x: 4,
        y: 27
      }, {
        x: 5,
        y: 28
      }, {
        x: 6,
        y: 33
      }]
    };
    dataSet3 = {
      name: 'dataSet3',
      data: [{
        x: 0,
        y: 45
      }, {
        x: 1,
        y: 51
      }, {
        x: 2,
        y: 42
      }, {
        x: 3,
        y: 47
      }, {
        x: 4,
        y: 54
      }, {
        x: 5,
        y: 57
      }, {
        x: 6,
        y: 49
      }]
    };
    dataSet4 = {
      name: 'dataSet4',
      data: [{
        x: 0,
        y: 80
      }, {
        x: 1,
        y: 69
      }, {
        x: 2,
        y: 81
      }, {
        x: 3,
        y: 84
      }, {
        x: 4,
        y: 78
      }, {
        x: 5,
        y: 83
      }, {
        x: 6,
        y: 85
      }]
    };
    // coerce json strings to integers
    function mapData(data) {
      data.forEach(function(d) {
        d.data.forEach(function(v) {
          v.y = (v.y) ? +v.y : null;
        });
      });
      return data;
    }
    // get requested data sets for json request
    function getDataSets() {
      // loop through checked boxes for requested data sets
      dataSets = [];
      var c = 0;
      $('input:checkbox.data-set-control').each(function(i) {
        if ($(this).prop('checked')) {
          var name = $(this).siblings('span').html();
          var val = $(this).val();
          if (name == 'dataSet1') {
            dataSets[c] = dataSet1;
            c++;
          }
          if (name == 'dataSet2') {
            dataSets[c] = dataSet2;
            c++
          }
          if (name == 'dataSet3') {
            dataSets[c] = dataSet3;
            c++;
          }
          if (name == 'dataSet4') {
            dataSets[c] = dataSet4;
            c++;
          }
        }
      });
      return dataSets;
    }
    // svg margins
    var margin = {
      top: 20,
      right: 30,
      bottom: 30,
      left: 40
    };
    // svg dimensions
    totalW = 900;
    totalH = 400;

    var width = totalW - margin.left - margin.right;
    var height = totalH - margin.top - margin.bottom;
    var radius = 3;

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

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

    var svg = d3.select('#chartContainer').append('svg')
      .attr('class', 'lineChart')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    var color = d3.scale.category10();

    var line = d3.svg.line()
      .defined(function(d) {
        return d.y != null;
      })
      .interpolate('cardinal')
      .x(function(d) {
        return x(d.x);
      })
      .y(function(d) {
        return y(d.y);
      });


    function render() {
      /*
      var ajax = JSON.stringify( getDataSets() );
      var url = '../scripts/d3-data.php?ajax='+ajax;
      d3.json(url, function (data) { */
      // json normally returns an array of objects commensurate
      // to the number of checked boxes representing data sets

      // manually set data for fiddle
      data = getDataSets();
      // global width/height variables are lost through json request
      totalW = 900;
      totalH = 400;
      var width = totalW - margin.left - margin.right;
      var height = totalH - margin.top - margin.bottom;

      // coerce json to integers
      d3Data = mapData(data);

      color.domain(d3Data.map(function(d) {
        return d.name;
      }));

      x.domain([
        0,
        d3.max(d3Data, function(d) {
          return d3.max(d.data, function(v) {
            return v.x;
          });
        })
      ]);
      y.domain([
        0,
        d3.max(d3Data, function(d) {
          return d3.max(d.data, function(v) {
            return v.y + 10;
          });
        })
      ]);

      var xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom');

      var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left');

      // check if y axis exists
      if (svg.selectAll(".y.axis")[0].length < 1) {
        // does not, append to svg
        svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);
      } khác {
        // does, so transition any domain change(s)
        var updateY = svg.selectAll(".y.axis");
        updateY.transition().duration(500).call(yAxis);
      }

      // x axis never changes so only append if doesn't exist
      if (svg.selectAll('.x.axis')[0].length < 1) {
        svg.append('g')
          .attr('class', 'x axis')
          .call(xAxis)
          .attr('transform', 'translate(0,' + height + ')');
      }

      // only add horizontal grid if doesn't exist
      if (svg.selectAll('.grid')[0].length < 1) {
        // add horizontal lines for readability
        svg.append('g')
          .attr('class', 'grid')
          .call(d3.svg.axis().scale(y)
            .orient('left')
            .tickSize(-(width), 0, 0)
            .tickValues(function(d, i) {
              var tickVals = [];
              var max = d3.max(d3Data, function(d) {
                return d3.max(d.data, function(v) {
                  return +v.y;
                });
              });
              for (i = 10; i < (max + 10); i += 10) {
                tickVals.push(i);
              }
              return tickVals;
            })
            .tickFormat('')
          );
      }

      var path = svg.selectAll('.line')
        .data(d3Data)
        .attr('class', 'line');

      path.transition()
        .duration(500)
        .attr('d', function(d) {
          return line(d.data);
        })
        .style('stroke', function(d) {
          return color(d.name);
        });

      path.enter()
        .append('path')
        .attr('class', 'line')
        .attr('d', function(d) {
          return line(d.data);
        })
        .style('stroke', function(d) {
          return color(d.name);
        });

      path.exit().remove();

      var nodeGroup = svg.selectAll('.nodeGroup')
        .data(d3Data, function(d){
          return d.name;
        });
        
      nodeGroup.exit().remove();
        
      nodeGroup  
        .enter()
        .append('g')
        .attr('class', 'nodeGroup');

      var circles = nodeGroup.selectAll('.dataNode')
        .data(function(d) {
          return d.data;
        });

      circles.enter()
        .append('circle')
        .style('opacity', 0)
        .attr('class', 'dataNode')
        .attr('r', function(d) {
          return d.y == null ? 0 : radius;
        });

      circles.exit().remove();

      circles
        .attr('cx', function(d) {
          return x(d.x);
        })
        .attr('cy', function(d) {
          return y(d.y);
        })
        .transition()
        .duration(500)
        .delay(300)
        .style('opacity', 1);

      //});
    }

    render();

    $(function() {

      $('input:checkbox.data-set-control').on('change', function() {
        var type;
        $('.btn-group button.btn').each(function() {
          if ($(this).hasClass('active')) type = $(this).html().toLowerCase();
        });
        render();
      });
    });


关于jquery - D3 进入/退出路径圆组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33711044/

28 4 0
Đề xuất bài viết: jquery - 带 dropzone 的后正规形式
Đề xuất bài viết: python - 向异步上下文管理器添加超时
Đề xuất bài viết: javascript - 为什么对象数组的映射在我的 react 表组件中不起作用？
Đề xuất bài viết: python - 如何使用 __new__ 创建基于另一个类的实例的类？
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress