Question

因此，我一直在制作一张图表，目的是展示前100部最昂贵的电影，并将其放在用户评分和收入的位置。我一直在使用包含所有这些数据的CSV。

我无法将y轴放在正确的位置且数据未显示（以圆圈的形式显示）

控制台没有错误......我做错了什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script type="text/javascript" src="d3.v4.js">
    </script>

</head>
<body>
    <script type="text/javascript">



//Margins & Height and Width
var padding =30;
var w = 1000 
var h = 700 


//Create SVG element inside the body 
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)


// X Axis
var x_value = function (d) {return d.vote_average;}; // data for X
var x_scale = d3.scaleLinear()
                .range([0, w]); // lowest data to maximum width
var x_map = function(d) { return x_scale(x_value(d));} 
var xAxis  = d3.axisBottom()
                .scale(x_scale)



// Y Axis
var y_value = function (d) {return d.revenue;}; // data for Y
var y_scale = d3.scaleLinear()
                .range([0, w]); // lowest data to maximum width
var y_map = function(d) { return y_scale(y_value(d));} 
var yAxis =d3.axisBottom()
              .scale(y_scale)


// R Radius setup // TO BE ADDED


// Load CSV data file
d3.csv("movies.csv", function(error, data) {

    data.forEach(function(d){
    d.vote_average = +d.vote_average
    d.revenue = +d.revenue
  // console.log(d);
});


// x Axis - IMDB Rating
svg.append("g")
    .attr("class", "x_axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis)
.append("text")
    .attr("class","label")
    .attr("x", w)
    .attr("y", h )
    .style("text-anchor", "end")
    .text("IMDB Rating");

// Revenue
svg.append("g")
    .attr("class","y_axis")
    .call(yAxis)
.append("text")
    .attr("class", "label")
    .attr("transform", "translate(" + padding + ",0)")
    .attr("y", 6)
    .style("text-anchor", "end")
    .text("Release Date");

//Circles 
svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("class","circles")
    .attr("cx", x_map)
    .attr("cy", y_map)
    .attr("r", 5) 
    .style("fill", "black")


});

    </script>

</body>

CSV示例

budget  genres  original_language   original_title  popularity  release_date    revenue title   vote_average
380000000   [{"id": 12, "name": "Adventure"}, {"id": 28, "name": "Action"}, {"id": 14, "name": "Fantasy"}]  en  Pirates of the Caribbean: On Stranger Tides 135.413856  14/05/2011  1045713802  Pirates of the Caribbean: On Stranger Tides 6.4
300000000   [{"id": 12, "name": "Adventure"}, {"id": 14, "name": "Fantasy"}, {"id": 28, "name": "Action"}]  en  Pirates of the Caribbean: At World's End    139.082615  19/05/2007  961000000   Pirates of the Caribbean: At World's End    6.9

D3散点图无法正常工作，显示y轴错误且不显示数据

0 个答案: