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”，“ 1”），（“ Vigun01”，“ 2”），（“ Vigun01”，“ 3”），（“ Vigun01”，“ 4”），但是如何在数据集中进行呢？

Answer 1

您需要调整几件事：

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

您的代码：

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

不会将您的字符串转换为数组或有意义的数字。会导致NaN。

由于您想在一行上为外部JSON数组的每个元素绘制圆，但要根据上游值数组的值更改x位置，因此建议将创建圆元素的步骤分为2个步骤。

首先，为每个启动子创建一个g元素，如下所示：

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

然后为每个组元素创建与该启动子相对应的一组圆圈。为此，您必须稍微调整数据，然后使用此数据进行合并。

为同一启动子的圈子创建新数组：

  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>

如何在D3.js中输入数组？

1 个答案: