javascript - 无法在 D3 中的分组条形图上正确绘制散点图

标签 javascript d3.js charts

我有一组嵌套的 json 数据:

var data = [{"time":"2016-03-01","values":[{"specimen_count":1,"trap":"S0024", "species":1},{"specimen_count":2,"trap":"S0025", "species":2},{"specimen_count":2,"trap":"S0026", "species":2}]},{"time":"2016-03-15","values":[{"specimen_count":6,"trap":"S0024", "species":6},{"specimen_count":5,"trap":"S0025", "species":4},{"specimen_count":7,"trap":"S0026", "species":6}]}];

我想绘制一组分组条形图，每组代表一个时间间隔，每组有3个条形图，每个条形图代表一个陷阱，条形图的高度是specimen_count字段。

现在我想添加一个散点图，每个条形一个点，点的高度是物种字段，使用相同的比例。但我无法成功地将点放在分组条形图的顶部。我确实设法添加了一条包含物种数据的线，但我无法使用相同的逻辑添加点。

这是我的代码:

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

    var x0 = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var x1 = d3.scale.ordinal();

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

    var xAxis = d3.svg.axis()
        .scale(x0)
        .tickSize(0)
        .orient("bottom");

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

    var color = d3.scale.ordinal()
        .range(["#ca0020","#f4a582","#92c5de"]);

    var svg = d3.select('#chart').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 + ")");

var categoriesNames = data.map(function(d) { return d.time; }); // the 5 time periods
  var trapNames = data[0].values.map(function(d) { return d.trap; }); // the name of the traps
    console.log(trapNames);

  x0.domain(categoriesNames); 
  x1.domain(trapNames).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(category) { return d3.max(category.values, function(d) { return d.specimen_count; }); })]);


  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .style('opacity','0')
      .call(yAxis)
  .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style('font-weight','bold')
      .text("Value");

  svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');



  var slice = svg.selectAll(".slice")
      .data(data)
      .enter().append("g")
      .attr("class", "slice")
      .attr("transform",function(d) { return "translate(" + x0(d.time) + ",0)"; });

  slice.selectAll("rect")
      .data(function(d) { return d.values; })
  .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.trap); })
      .style("fill", function(d) { return color(d.trap) })
      .attr("y", function(d) { return y(0); })
      .attr("height", function(d) { return height - y(0); })
      .on("mouseover", function(d) {
          d3.select(this).style("fill", d3.rgb(color(d.trap)).darker(2));
      })
      .on("mouseout", function(d) {
          d3.select(this).style("fill", color(d.trap));
      });

  slice.selectAll("rect")
      .transition()
      .delay(function (d) {return Math.random()*1000;})
      .duration(1000)
      .attr("y", function(d) { return y(d.specimen_count); })
      .attr("height", function(d) { return height - y(d.specimen_count); });


   var valueline = d3.svg.line()
            .x(function (d) { return x1(d.trap) + x1.rangeBand()/2; })
            .y(function (d) { return y(d.species); });

   slice.enter()
    .append('path')
    .attr('class','line')
    .style('stroke', "#0571b0")
    .style('stroke-width', "3px")
    .attr('fill', 'none')
    .attr('d', function(d) { return valueline(d.values); });



    slice.selectAll('.dot').data(data,function(d){return d.time;})
    .enter()
    .append("circle")
     .attr("class", "dot")
    .attr("r",5)
    .attr("cx", function(d){
        return x1(d.trap) + x1.rangeBand()/2;
    })
    .attr("cy",function(d){
        return y(d.species);
    })
    .attr("fill","#0571b0");

我从与圆相关的代码中得到的错误是:d3.min.js:1 错误:属性 cx:预期长度，“NaN”。

我认为条形图的嵌套数据和序数比例让我有点困惑，所以可能是我不理解这些情况下的完整数据访问。

这也是当前图表的屏幕截图 enter image description here

最佳答案

如果您需要每个条形图上的点，那么 data() 回调必须返回条形列表而不是单个项目。您是否尝试将其替换为:

slice.selectAll('.dot')
    .data(function(d) {
        return d.values;
    })
    .enter()
    .append("circle") //... and so on

执行此操作将使用现有的 data 对象(具有 5 个条形组)，但为每个条形呈现一个点。

这里正在运行:

<!DOCTYPE html>
<html>

<head>
  <script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680c5b285b465d46595f" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
</head>

<body>
  <div id="chart"></div>
  <script>
      var data = [{
        "time": "2016-03-01",
        "values": [{
          "specimen_count": 1,
          "trap": "S0024",
          "species": 1
        }, {
          "specimen_count": 2,
          "trap": "S0025",
          "species": 2
        }, {
          "specimen_count": 2,
          "trap": "S0026",
          "species": 2
        }]
      }, {
        "time": "2016-03-15",
        "values": [{
          "specimen_count": 6,
          "trap": "S0024",
          "species": 6
        }, {
          "specimen_count": 5,
          "trap": "S0025",
          "species": 4
        }, {
          "specimen_count": 7,
          "trap": "S0026",
          "species": 6
        }]
      }];

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

    var x0 = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);

    var x1 = d3.scale.ordinal();

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

    var xAxis = d3.svg.axis()
      .scale(x0)
      .tickSize(0)
      .orient("bottom");

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

    var color = d3.scale.ordinal()
      .range(["#ca0020", "#f4a582", "#92c5de"]);

    var svg = d3.select('#chart').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 + ")");

    var categoriesNames = data.map(function(d) {
      return d.time;
    }); // the 5 time periods
    var trapNames = data[0].values.map(function(d) {
      return d.trap;
    }); // the name of the traps
    console.log(trapNames);

    x0.domain(categoriesNames);
    x1.domain(trapNames).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function(category) {
      return d3.max(category.values, function(d) {
        return d.specimen_count;
      });
    })]);


    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .style('opacity', '0')
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style('font-weight', 'bold')
      .text("Value");

    svg.select('.y').transition().duration(500).delay(1300).style('opacity', '1');



    var slice = svg.selectAll(".slice")
      .data(data)
      .enter().append("g")
      .attr("class", "slice")
      .attr("transform", function(d) {
        return "translate(" + x0(d.time) + ",0)";
      });

    slice.selectAll("rect")
      .data(function(d) {
        return d.values;
      })
      .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) {
        return x1(d.trap);
      })
      .style("fill", function(d) {
        return color(d.trap)
      })
      .attr("y", function(d) {
        return y(0);
      })
      .attr("height", function(d) {
        return height - y(0);
      })
      .on("mouseover", function(d) {
        d3.select(this).style("fill", d3.rgb(color(d.trap)).darker(2));
      })
      .on("mouseout", function(d) {
        d3.select(this).style("fill", color(d.trap));
      });

    slice.selectAll("rect")
      .transition()
      .delay(function(d) {
        return Math.random() * 1000;
      })
      .duration(1000)
      .attr("y", function(d) {
        return y(d.specimen_count);
      })
      .attr("height", function(d) {
        return height - y(d.specimen_count);
      });


    var valueline = d3.svg.line()
      .x(function(d) {
        return x1(d.trap) + x1.rangeBand() / 2;
      })
      .y(function(d) {
        return y(d.species);
      });

    slice
      .append('path')
      .attr('class', 'line')
      .style('stroke', "#0571b0")
      .style('stroke-width', "3px")
      .attr('fill', 'none')
      .attr('d', function(d) {
        return valueline(d.values);
      });



    slice.selectAll('.dot').data(function(d) {
        return d.values;
      })
      .enter()
      .append("circle")
      .attr("class", "dot")
      .attr("r", 5)
      .attr("cx", function(d) {
        return x1(d.trap) + x1.rangeBand() / 2;
      })
      .attr("cy", function(d) {
        return y(d.species);
      })
      .attr("fill", "#0571b0");
  </script>
</body>

</html>

关于javascript - 无法在 D3 中的分组条形图上正确绘制散点图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46499921/

上一篇：javascript - Swiper - 方法不起作用 - mySwiper.slideTo 不是函数

下一篇：javascript - 如何使用 PHP 或 JS 检索 IDFA/AdID 以用于 dc_rdid 属性？

相关文章：

清晰的Javascript

javascript - .click 在 Javascript 中没有任何效果 - 应该更新基于数组的两个元素

javascript - 将 javascript 对象关联到 SVG 元素

d3.js - 是否有可能让 Angular2 和 D3.js 一起工作？

c# - 在 WPF 中动态更改 Setter 值

javascript - D3.js 从 json 更新条形图

javascript - 碰撞检测: Separating Axis Theorem - Circle versus Polygon

javascript - 防止 react 简单 map 中的蓝色路径矩形

charts - Kendo Chart 控件不会在 IE 10 中呈现正确的 SVG

javascript - Highcharts ； x轴缩放问题

©2024 IT工具网  联系我们