y值

y值

关注
发信
关注(28)粉丝(399)

javascript - Beeswarm图，基于 bool 值拆分“swarm” y值

我一直在尝试修改后的蜂群图并运行。关于它的“特殊”之处在于，我试图基于布尔值拆分y值。因此，您可以想象一种双重蜂拥的视觉效果-一个部分的x轴上方附加了圆圈，而另一部分的x轴下方附加了圆圈。

我的数据非常简单，但是出于上下文考虑，这里是一个解释：


d.educ =教育程度（离散变量，以年为单位）
d.inlf =劳动力中（如果是，则为1，否则，则为0）


因此，如果我们对此表示清楚，请允许我重申我的目标。我希望观察力不在劳动力中的圆位于x轴上方，我希望观察力不在劳动力中的圆位于x轴下方。

下面的代码包含来自我完整数据集的150个样本（硬编码）：



var margins = {top:20, bottom:300, left:30, right:100};

var height = 200;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

    var formatValue = d3.format(",d");

    var xScale = d3.scaleLinear()
        .range([0, width]);
/*
var tsvData = d3.tsv('voronoi-circles.tsv');

tsvData.then(function(rawData) {



  var data = rawData.map(function(d) {
    return {educ:+d.educ, inlf:+d.inlf}
  });
*/

var data = [{'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 14.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 16.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 11, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 10.0, 'inlf': 1},
 {'educ': 11, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 16.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 13.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 17.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 17.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 11, 'inlf': 1},
 {'educ': 16.0, 'inlf': 1},
 {'educ': 13.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 16.0, 'inlf': 1},
 {'educ': 11, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 10.0, 'inlf': 1},
 {'educ': 14.0, 'inlf': 1},
 {'educ': 17.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 16.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 16.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 8.0, 'inlf': 1},
 {'educ': 10.0, 'inlf': 1},
 {'educ': 16.0, 'inlf': 1},
 {'educ': 14.0, 'inlf': 1},
 {'educ': 17.0, 'inlf': 1},
 {'educ': 14.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 14.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 8.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 8.0, 'inlf': 1},
 {'educ': 17.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 1},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 9.0, 'inlf': 0},
 {'educ': 10.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 17.0, 'inlf': 0},
 {'educ': 15.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 6.0, 'inlf': 0},
 {'educ': 14.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 14.0, 'inlf': 0},
 {'educ': 9.0, 'inlf': 0},
 {'educ': 17.0, 'inlf': 0},
 {'educ': 13.0, 'inlf': 0},
 {'educ': 9.0, 'inlf': 0},
 {'educ': 15.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 13.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 13.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 16.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 13.0, 'inlf': 0},
 {'educ': 10, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 17.0, 'inlf': 0},
 {'educ': 14.0, 'inlf': 0},
 {'educ': 16.0, 'inlf': 0},
 {'educ': 17.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 10, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 17.0, 'inlf': 0},
 {'educ': 10.0, 'inlf': 0},
 {'educ': 13.0, 'inlf': 0},
 {'educ': 10, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 16.0, 'inlf': 0},
 {'educ': 17.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 16.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 16.0, 'inlf': 0},
 {'educ': 8.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 13.0, 'inlf': 0},
 {'educ': 11.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 14.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 17.0, 'inlf': 0},
 {'educ': 14.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 9.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 12.0, 'inlf': 0},
 {'educ': 14.0, 'inlf': 0},
 {'educ': 16.0, 'inlf': 0}];

  xScale.domain(d3.extent(data, function(d) { return d.educ; }));

  var simulation = d3.forceSimulation(data)
    .force("x", d3.forceX(function(d) { return xScale(d.educ); }).strength(1))
    .force("y", d3.forceY(height / 2))
    .force("collide", d3.forceCollide(4))
    .stop();

    for (var i = 0; i < 120; ++i) simulation.tick();

    graphGroup.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xScale).ticks(20, ".0s"));

  var cell = graphGroup.append("g")
      .attr("class", "cells")
    .selectAll("g").data(d3.voronoi()
        .extent([[-margins.left, -margins.top], [width + margins.right, height + margins.top]])
        .x(function(d) { return d.x; })
        .y(function(d) {
          if (d.inlf==1) {
            return d.y;
          } else {
            return d.y+300;
          }
          })
      .polygons(data)).enter().append("g");

      cell.append("circle")
          .attr("r", 3)
          .attr("cx", function(d) { return d.data.x; })
          .attr("cy", function(d) { return d.data.y; });

      cell.append("path")
          .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

/*
      cell.append("title")
          .text(function(d) { return d.data.id + "\n" + formatValue(d.data.value); });
*/
//})

.cells path {
  fill: none;
  pointer-events: all;
}

.cells :hover circle {
  fill: red;
}

<script src="https://d3js.org/d3.v5.min.js"></script>





如您所见，我尝试了一种相当简单的方法，只是使用if语句将+300拍到y值。但是，结果与预期不符，并且似乎已将所有值都截断为0。不知道为什么。

题

如何修改圆坐标逻辑以说明我的布尔（d.inlf）？还是不是那么简单？也许应该调用另一个单独的d3.voronoi()。无论哪种情况，我都不知道如何进行。

最佳答案

我绝对不知道在这里使用voronoi的目的是什么，所以我摆脱了它。

您只需要两件事。首先，确定模拟中的y位置：

.force("y", d3.forceY(function(d) {
    return d.inlf ? height - 100 : height + 100
}))


然后，设置圆的位置：

.attr("cx", function(d) {
    return d.x;
})
.attr("cy", function(d) {
    return d.y;
});


最后，请记住，有一个速记表示必须运行模拟刻度的次数，因此...

for (var i = 0; i < 120; ++i) simulation.tick();


...可以只是：

simulation.tick(120);


这是演示：



var margins = {
  top: 0,
  bottom: 200,
  left: 30,
  right: 100
};

var height = 150;
var width = 900;

var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;

var svg = d3.select('body')
  .append('svg')
  .attr('width', totalWidth)
  .attr('height', totalHeight);

var graphGroup = svg.append('g')
  .attr('transform', "translate(" + margins.left + "," + margins.top + ")");

var formatValue = d3.format(",d");

var xScale = d3.scaleLinear()
  .range([0, width]);

var data = [{
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 11,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 10.0,
    'inlf': 1
  },
  {
    'educ': 11,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 13.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 11,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 13.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 11,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 10.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 8.0,
    'inlf': 1
  },
  {
    'educ': 10.0,
    'inlf': 1
  },
  {
    'educ': 16.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 14.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 8.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 8.0,
    'inlf': 1
  },
  {
    'educ': 17.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 1
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 9.0,
    'inlf': 0
  },
  {
    'educ': 10.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 15.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 6.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 9.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 9.0,
    'inlf': 0
  },
  {
    'educ': 15.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 10,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 10,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 10.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 10,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  },
  {
    'educ': 8.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 13.0,
    'inlf': 0
  },
  {
    'educ': 11.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 17.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 9.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 12.0,
    'inlf': 0
  },
  {
    'educ': 14.0,
    'inlf': 0
  },
  {
    'educ': 16.0,
    'inlf': 0
  }
];

xScale.domain(d3.extent(data, function(d) {
  return d.educ;
}));

var simulation = d3.forceSimulation(data)
  .force("x", d3.forceX(function(d) {
    return xScale(d.educ);
  }).strength(1))
  .force("y", d3.forceY(function(d) {
    return d.inlf ? height - 100 : height + 100
  }))
  .force("collide", d3.forceCollide(4))
  .stop();

simulation.tick(120);

graphGroup.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale).ticks(20, ".0s"));

var circles = graphGroup.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 3)
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  });

.cells path {
  fill: none;
  pointer-events: all;
}

.cells :hover circle {
  fill: red;
}

<script src="https://d3js.org/d3.v5.min.js"></script>

关于javascript - Beeswarm图，基于 bool 值拆分“swarm” y值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58006740/

10-10 22:11
Powered by LMLPHP ©2024 y值 0.023908