个人中心
gpt4 book ai didi

jquery - D3 进入/退出路径圆组

转载 作者：行者123 更新时间：2023-12-01 00:22:18 27 4
gpt4 key购买 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.

最佳答案

这里有几个问题:

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

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

这里一切都已修复:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <style>
    svg {
      font: 10px sans-serif;
    }
    
    svg .text {
      font-size: 1.2em;
      shape-rendering: crispEdges;
    }
    
    .controls {
      display: block;
      margin-left: 20px;
      margin-top: 20px;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .line {
      fill: none;
    }
    
    .grid {
      stroke: #eee;
    }
    
    .bar {
      fill: #40779C;
    }
    
    .bar:hover {
      fill: #AD4444;
    }
    
    .barChart .x.axis path {
      stroke: none;
    }
    
    .barChart .text,
    .lineChart .text {
      fill: #fff;
    }
    
    .pieChart .text {
      fill: #666;
    }
    
    .arc path {
      stroke: #fff;
    }
    
    #getData {
      margin-left: 10px;
    }
    
    #weeks {
      margin-left: 10px;
    }
    
    .accordion-title {
      margin: 3px 0;
    }
    
    .overlay {
      fill: none;
      stroke: none;
    }
    
    .dataNode {
      fill: #eee;
      stroke: #666;
    }
  </style>
</head>

<body>
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          Data sets
        </div>
        <div class="panel-body">
          <div class="checkbox">
            <label>
              <input type="checkbox" class="data-set-control" checked="" />
              <span>dataSet1</span>
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" class="data-set-control" checked="" />
              <span>dataSet2</span>
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" class="data-set-control" checked="" />
              <span>dataSet3</span>
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" class="data-set-control" />
              <span>dataSet4</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br />
  <div class="row">
    <div id="chartContainer"></div>
  </div>
  <script>
    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);
      } else {
        // 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();
      });
    });
  </script>
</body>

</html>

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

27 4 0
文章推荐： jquery - 带 dropzone 的后正规形式
文章推荐： python - 向异步上下文管理器添加超时
文章推荐： javascript - 为什么对象数组的映射在我的 react 表组件中不起作用？
文章推荐： python - 如何使用 __new__ 创建基于另一个类的实例的类？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com