个人中心
gpt4 book ai didi

javascript - d3js中如何处理数据遮挡？

转载 作者：行者123 更新时间：2023-11-28 07:12:35 26 4
gpt4 key购买 nike

我正在尝试创建一种数据的原始分布:

  • X 轴:人物(a 或 b)
  • Y 轴:强度(范围为 0 到 4)

有什么方法可以防止数据点相互遮挡吗？例如，当存在现有数据点时，具有相同值(不同日期)的下一个数据点位于与其偏移的位置，如下图所示。

绘图的当前状态 Current status of plot

绘图的所需状态 Desired status of plot

我愿意更改数据格式以获得最终结果。

Dataset:

    condition   intensity   date
    a   2   1
    a   3   2
    a   0   3
    a   1   4
    b   3   5
    b   3   6
    b   4   7
    b   4   8

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

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

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

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

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

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

d3.csv("data.csv", type, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) {
    return d.condition;
  }));
  y.domain([0, 4]);

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

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

  svg.selectAll(".point")
    .data(data)
    .enter().append("path")
    .attr("class", "point")
    .attr("d", d3.svg.symbol().type("square").size([500]))
    .attr("transform", function(d) {
      return "translate(" + x(d.condition) + "," + y(d.intensity) + ")";
    });
});


function type(d) {
  d.severity = +d.severity;
  return d;
}
.bar {
  fill: steelblue;
}
.bar:hover {
  fill: brown;
}
.axis {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </body>

最佳答案

想出了一个办法。

将所有数据点存储在数组中并检查是否有重复项。如果遇到重复项，则会沿 X 轴偏移 40 像素。 

var arr = []; // array for holding all the datapoints
var tally = []; // array for storing the duplicates

// Change the squares
    svg.selectAll(".point")
      .attr("d", d3.svg.symbol().type("square").size([500]))
      .attr("transform", function(d) {
    var current = (d.condition + "," + d.severity); // current data point
    var index = arr.indexOf(current); // get the index of current data point in array arr

if (index == -1) { // if index is -1, then no match found. unique data point
  arr.push(current); // push point onto array
  position = "translate(" + x(d.condition) + "," + y(d.severity) + ")";

} else {
  tally.push(current);
  var tallylen = tally.length;
  var tindex = tally.indexOf(current);
  for (var i = 0; i < tallylen; i++) {
    var c = 0;
    if (c == tindex) {
      position = "translate(" + (x(d.condition) + (40 * (i + 1))) + "," + y(d.severity) + ")";
    } else {
      c = tindex;
      position = "translate(" + (x(d.condition) + (40 * (i + 1 - tindex))) + "," + y(d.severity) + ")";
    };

  }
};
return position;
})

如果有人有更好的解决方案，请发布。

关于javascript - d3js中如何处理数据遮挡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31152148/

26 4 0
文章推荐： swift - 一个场景中有多少个 SKNode？为什么我的表现这么差？
文章推荐： css - 某种不需要的 div 突出显示 datepicker materialize-css
文章推荐： c++ - DirectX 9 顶点球体
文章推荐： json - Swift:从 NSURLSession 任务返回 JSON 字符串
行者123
个人简介

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

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