Как отобразить этот JSON в диаграмме рассеяния D3 SVG? - PullRequest
Новая
       38

Как отобразить этот JSON в диаграмме рассеяния D3 SVG?

0 голосов
/ 10 мая 2019

Я сделал (сделал) следующий объект:

enter image description here

Теперь я пытаюсь отобразить данные следующим образом: диаграмма рассеяния SV3 D3 с осью х с индикатором «Дети (0–17 лет), проживающие в районах с проблемами преступности или насилия (%)», на По оси Y - показатель «Коэффициенты рождаемости среди подростков» и размер кружков по сравнению с размером их ВВП (показатель «Валовой внутренний продукт (подход с учетом расходов)»).

Я хочу реализовать элемент (я думал, что-то вроде ползунка), чтобы выбрать год данных, которые я хочу отобразить (в каждой стране [0] == 2012 ... [4] == 2016).

Вот так выглядит мой график рассеяния на данный момент:

enter image description here

В настоящее время мой код выглядит так: 

function drawScatter(teenArea, teenPreg, GDPData){

    var svg = d3.select("body").append("svg").attr("width", "960").attr("height", "500");     

    var teenArea = teenArea;
    var teenPreg = teenPreg;
    var GDPData = GDPData;

    var dataset = mergeData(teenArea, teenPreg, GDPData)

    console.log(dataset)
    var margin = 
            {
            top: 35,
            right: 20,
            bottom: 50,
            left: 50
            };
    var w = +svg.attr("width") - margin.left - margin.right;
    var h = +svg.attr("height") - margin.top - margin.bottom;
    var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")") // make new frame inside the svg      

    var xScale = d3.scaleLinear()     // make seperate bins for every country
        // .domain([0, d3.max(teenArea, function(d) { return d.Datapoint; })])
        .domain([0,20])
        .range([0, w]);

    var yScale = d3.scaleLinear()
        // .domain([0, d3.max(teenPreg, function(d) { return d.Datapoint; })])         
        .domain([0, 20])   
        .range([h, 0]);

    var sizeScale = d3.scaleLinear()
        .domain([0.25, 0.6])        // make the bar colour go from blue to black
        .range([5, 50])

    var tip = d3.tip()              // displays data when hovering
        .attr('class', 'd3-tip')
        .offset([-20, 0])
        .html(function(d) {
            return "<strong>GINI Value:</strong> <span style='color:red'>" + d.Value + "</span>";
        })    

        svg.call(tip); 

    // Add x-axis
    g.append("g")
    .attr("class", "axis-x")
    .attr("transform", "translate(0," + h  + ")")
    .attr("x", w)
    .call(d3.axisBottom(xScale));

    // Add y-axis
    g.append("g")
        .attr("class", "axis-y")
        .attr("y", h)
        .call(d3.axisLeft(yScale));

    // text label for the x axis
    g.append("text")   
        .attr("id", "info")
        .attr("transform",
                "translate(" + (w/2) + " ," + 
                    (h + margin.top ) + ")")
        .style("text-anchor", "middle")
        .text("Children (0-17) living in areas with problems with crime or violence (%)");

    // text label for the y axis
    g.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x",0 - (h / 2))
        .attr("dy", "1em")
        .attr("id", "info")
        .style("text-anchor", "middle")
        .text("Adolescent fertility rates"); 

    // text label for the x axis
    g.append("text")   
        .attr("id", "title")
        .attr("transform",
                "translate(" + (w/2) + " ," + 
                    (-20) + ")")
        .style("text-anchor", "middle")
        .text("Fertility Rate & Living Standards of Teens over various GDPs");

    g.selectAll(".bar")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function (d,i) { return x(d[0][i][4]); } )
        .attr("cy", function (d,i) { return y(d[1][i][4]); } ) // as a test trying to show data of 2016
        .attr("r", 2);

};

К сожалению, на графике рассеяния нет кругов. Даже если я установлю фиксированное число для cx и cy.

Кто-нибудь знает, как это исправить?

...