我如何在d3.js中输入数组

Question

它是否可以从d3.js中的数据集中输入整个数组？还是我必须在输入之前清理它？

我的数据集.Jason的一个示例在这里：

[
{
    "promoter": "Vigun01",
    "upstream": "[2, 57, 150, 376]"
},
{
    "promoter": "Vigun01",
    "upstream": "[500, 732, 765]"
},
{
    "promoter": "Vigun01",
    "upstream": "[675]"
},
{
    "promoter": "Vigun02",
    "upstream": "[623]"
},
{
    "promoter": "Vigun03",
    "upstream": "[133, 601]"
},
{
    "promoter": "Vigun04",
    "upstream": "[599, 650]"
},
{
    "promoter": "Vigun05",
    "upstream": "[50, 789]"
}
]

和我在d3.js中的脚本在这里：

var svg = d3.select("#chart-area")
.append("svg")
    .attr("width", "400")
    .attr("height", "400");
d3.json("data/dataset.json").then(function(data){
data.forEach(d => {
    d.upstream = +d.upstream;
});
console.log(data);
var y = d3.scaleBand()
    .domain(data.map(function(d){
        return d.promoter;
    }))
    .range([0, 400])
    .paddingInner(0.2)
    .paddingOuter(0.2);
var x = d3.scaleLinear()
    .domain([0,1000])
    .range([0,400]);
var line = svg.selectAll("line")
    .data(data);
line.enter()
    .append('line')
        .attr('x1', 0)
        .attr('y1', (d,i)=>y(d.promoter))
        .attr('x2', 400)
        .attr('y2', (d,i)=>y(d.promoter))
        .attr('stroke-width', 1)
        .attr('stroke', 'black');

var circle = svg.selectAll("circle")
        .data(data)
    .enter()
        .append("circle")
        .attr("cy", function(d){
            return y(d.promoter)
        })
        .attr("cx", function(d){
           return x(d.upstream)
        })
        .attr("r", 5)
        .attr("fill", function(d) {
            return "black";
        });

}).catch(function(error){
    console.log(error)
});

我可以绘制单个输入，例如（" vigun01"，" 10"），但是如果我有整个数组，我就不能。

如果转换（" vigun01"，" [1,2,3,4]"）对我来说是可以的（" vigun01"，" 3"），（" vigun01"，" 4"）但是我该如何在数据集中进行？

Answer 1

您需要进行几件事：

1. 首先，我建议您更改数据，以使上游属性包含数组而不是字符串。我看不到将它们作为字符串的好处，因此创建数据时应该更改它。

您的代码：

data.forEach(d => {
d.upstream = +d.upstream;
});

不会将您的字符串转换为数组，也不会转换为有意义的数字。它将导致Nan。

2. 由于您想在一行上为外部JSON数组的每个元素绘制圆圈，但要根据上游值数组值来改变X位置，因此我建议以2个步骤将Circle Element创建分开。

首先，您为每个启动子创建一个g元素，例如：

var circleGroups = svg.selectAll("g.circles")
  .data(data)
    .enter()
    .append("g")
    .attr("class", "circles"); 

3. 然后，为每个组元素创建与该启动子相对应的圆的集合。为此，您必须稍微调整数据，然后加入数据。

为同一启动子的圈子创建新阵列：

  function getCircleData(d) {
  var cdata = d.upstream.map (function(ele) { 
    return {upstream: ele, promoter: d.promoter};
  });
  return cdata; 
  }

和数据加入圆圈：

    var circle = circleGroups.selectAll("circle")
        .data(getCircleData)
    .enter()
        .append("circle")
        .attr("cy", function(d){
            return y(d.promoter)
        })
        .attr("cx", function(d){
           return x(d.upstream)
        })
        .attr("r", 5)
        .attr("fill", function(d) {
            return "black";
        });

这是完整的工作代码。我刚刚用设置函数中的数组替换了您的ajax调用。

    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
// d3.json("data/dataset.json").then(function(data){
    let data = getData();
    /*
data.forEach(d => {
    d.upstream = +d.upstream;
});
console.log(data);
*/
var y = d3.scaleBand()
    .domain(data.map(function(d){
        return d.promoter;
    }))
    .range([0, 400])
    .paddingInner(0.2)
    .paddingOuter(0.2);
var x = d3.scaleLinear()
    .domain([0,1000])
    .range([0,400]);
var line = svg.selectAll("line")
    .data(data);
line.enter()
    .append('line')
        .attr('x1', 0)
        .attr('y1', (d,i)=>y(d.promoter))
        .attr('x2', 400)
        .attr('y2', (d,i)=>y(d.promoter))
        .attr('stroke-width', 1)
        .attr('stroke', 'black');
    var circleGroups = svg.selectAll("g.circles")
      .data(data)
    	.enter()
    	.append("g")
    	.attr("class", "circles");
    var circle = circleGroups.selectAll("circle")
            .data(getCircleData)
        .enter()
            .append("circle")
            .attr("cy", function(d){
                return y(d.promoter)
            })
            .attr("cx", function(d){
               return x(d.upstream)
            })
            .attr("r", 5)
            .attr("fill", function(d) {
                return "black";
            });
   
    function getCircleData(d) {
      var cdata = d.upstream.map (function(ele) { 
        return {upstream: ele, promoter: d.promoter};
      });
      return cdata; 
    }
    
    function getData() {
      var data = [
      {
          "promoter": "Vigun01",
          "upstream": [2, 57, 150, 376]
      },
      {
          "promoter": "Vigun01",
          "upstream": [500, 732, 765]
      },
      {
          "promoter": "Vigun01",
          "upstream": [675]
      },
      {
          "promoter": "Vigun02",
          "upstream": [623]
      },
      {
          "promoter": "Vigun03",
          "upstream": [133, 601]
      },
      {
          "promoter": "Vigun04",
          "upstream": [599, 650]
      },
      {
          "promoter": "Vigun05",
          "upstream": [50, 789]
      }
      ];
      return data;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>