Question

编辑：添加了根据注释加载回调的代码。虽然还是只有一点！

我有以下D3代码，但我总是得到一个空白图形，只显示标度并带有单个（或许多彼此叠置）点（十字）。

从mydata的以下输出中可以很快看到csv导入

$array = [];
        $array['random_key1'] = [
            [

                'name' => 'Alpha',
                'score' => 1
            ],
            [

                'name' => 'Beta',
                'score' => 1
            ],
            [

                'name' => 'Gamma',
                'score' => 4
            ],
            [

                'name' => 'Delta',
                'score' => 3
            ],
            [

                'name' => 'Epsilon',
                'score' => 2
            ],
            [

                'name' => 'Zeta',
                'score' => 2
            ]
        ];

 $array['random_key2'] = [
            [

                'name' => 'Alpha',
                'score' => 1
            ],
            [

                'name' => 'Beta',
                'score' => 1
            ],
            [

                'name' => 'Gamma',
                'score' => 4
            ],
            [

                'name' => 'Delta',
                'score' => 3
            ],
            [

                'name' => 'Epsilon',
                'score' => 2
            ],
            [

                'name' => 'Zeta',
                'score' => 2
            ]
        ];



foreach($array as &$value) {
  array_shift($value);
}


echo '<pre>';
print_r($array);

和数据集：

Object { rating: 89, winsNoms: 80 }
Object { rating: 63, winsNoms: 30 }
Object { rating: 83, winsNoms: 30 }

我不确定百分百秤，但是我检查了许多文档，看不到任何错误。

我之前所做的事情的最大变化是尝试添加一个带有所有transform / translate内容的十字架。

我知道所有的比例尺都有点错，并且我的利润率可能不正确，但是为什么我看不到任何点差？

Id,Title,Year,Runtime,Country,imdbRating,imdbVotes,Budget,Gross,WinsNoms,IsGoodRating
13,Alone in the Dark,2005,96,"Canada, Germany, USA",2.3,37613,20000000,8178569,9,0
38,Boogeyman,2005,89,"USA, New Zealand, Germany",4.1,25931,20000000,67192859,0,0
52,Constantine,2005,121,"USA, Germany",6.9,236091,75000000,221594911,11,1
62,Diary of a Mad Black Woman,2005,116,USA,5.6,10462,5500000,50458356,26,0

var margin = {top: 20, right: 19, bottom: 29, left: 39};
var w = 899;
var h = 449;

var mydata = [];

var x = d3.scale
          .linear()
          .range([-1, w]);

var y = d3.scale
          .linear()
          .range([h, -1]);

var svg = d3.select("body")
            .append("svg")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


// Grab the data
d3.csv('./movies.csv', function(error, csv){
    if (error) {
        console.log("Error thrown");
        throw error;
    }

    csv.forEach(function(d){
        mydata.push({rating: parseInt(d.imdbRating * 10),
                     winsNoms: parseInt(d.WinsNoms * 10)
        });
    });

    var x = d3.scale
      .linear()
      .range([-1, w]);
var y = d3.scale
  .linear()
  .range([h, -1]);


// Create some scales
x.domain([mydata, d3.max(0, function(d) {
  return d.rating;
})]);

//d3.extent(data, function(d) { return d.x; }));
y.domain([mydata, d3.max(0, function(d) {
  return d.winsNoms;
})]);

// Stick the x axis in...
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(-1," + h + ")")
  .call(d3.svg
    .axis()
    .scale(x)
    .orient("bottom"));

// and the y axis.
svg.append("g")
  .attr("class", "y axis")
  .call(d3.svg
    .axis()
    .scale(y)
    .orient("left"));

svg.append("g")
  .append("text")
  .attr("class", "titleText")
  .attr("y", margin.top)
  .attr("x", w / 2 + margin.left)
  .style("text-anchor", "end")
  .text(" Wins+Nominations vs. IMDb Rating");


// Put the crosses in to place (i.e. the points)
svg.selectAll(".point")
  .data(mydata)
  .enter()
  .append("path")
  .attr("class", "point")
  .attr("d", d3.svg.symbol().type("cross"))
  .attr("transform", function(d) {
    console.log(d);
    return "translate(" + x(d.rating) + "," + y(d.winsNoms) + ")";
  });
});

body {
  font: 12px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.point {
  fill: blue;
  stroke: #000;
}

.titleText {
  color: red;
}

Answer 1

答案由https://stackoverflow.com/users/9938317/riov8

提供

加载csv时，我需要在回调函数中包含大部分代码。即在我这样做之后：

d3.csv('./movies.csv', function(error, csv){

if (error) {
    console.log("Error thrown");
    throw error;
}

csv.forEach(function(d){
    mydata.push({rating: parseInt(d.imdbRating * 10),
                 winsNoms: parseInt(d.WinsNoms * 10)
    });
});

而不是用 }）;

我将方括号移到了代码的末尾，以使它们包含一切。

感谢riov8

无法获得要显示在D3散点图中的点

1 个答案: