D3.js Scatterplot с символами

Question

Я пытаюсь построить 60 точек: 30 равносторонних треугольников, направленных вверх, и 30 крестов. Координаты X и Y каждого символа являются случайными значениями от 0 до 100 включительно, которые должны вычисляться независимо.

Размер символа будет иметь значение от 5 до 50, сопоставленное с областью значений X в диапазоне [5,50]. Все объекты с размером, превышающим средний размер всех объектов диаграммы рассеяния, должны быть окрашены в синий цвет, а все остальные объекты - в зеленый. График должен иметь видимые оси X и Y, которые масштабируются в соответствии с созданными объектами. Тики на этих осях должны корректироваться автоматически на основе случайно сгенерированных объектов диаграммы рассеяния.

Я обновил свой код, но не смог понять, почему мои символы не отображаются должным образом.

function getRandomInt(min, max)         {
        return Math.floor(Math.random() * (max - min + 1)) + min;       }
    var data_tri = [], data_crs =[]

    for (var i=0; i<30; i++)
        {
            data_tri.push([getRandomInt(0,100),getRandomInt(0,100)]);
            data_crs.push([getRandomInt(0,100),getRandomInt(0,100)]);
        }


    var margin = {top: 20, right: 15, bottom: 60, left: 60}
      , width = 500 - margin.left - margin.right
      , height = 500 - margin.top - margin.bottom;



    var xScale = d3.scale.linear()
              .domain([0, d3.max(data_tri, function(d) { return d[0]; })])
              .range([ 0, width]);

    var yScale = d3.scale.linear()
              .domain([0, d3.max(data_crs, function(d) { return d[0]; })])
              .range([ height, 0 ]);

    var sizeMax = d3.max([d3.max(data_crs, function(d) { return d[0];}), d3.max(data_tri, function(d) { return d[0];})])

    var sizeScale = d3.scale.linear()
              .domain([0, sizeMax])
              .range([ 5, 50 ]);

    var colorScale = d3.mean([d3.mean(data_crs, function(d) { return d[0];}), d3.mean(data_tri, function(d) { return d[0];})])

    function symbolcolor(x)
    {
        if (x > colorScale){
            return "blue";
        }
        else {
            return "green";
        }
    }

    var chart = d3.select('body')
    .append('svg:svg')
    .attr('width', width + margin.right + margin.left)
    .attr('height', height + margin.top + margin.bottom)
    .attr('class', 'chart')
    .attr('id', 'svg_chart')


    var main = chart.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'main')   

    var xAxis1 = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');

    main.append('g')
    .attr('transform', 'translate(0,' + height + ')')
    .attr('class', 'main axis date')
    .call(xAxis1);

    var yAxis1 = d3.svg.axis()
    .scale(yScale)
    .orient('left');

    main.append('g')
    .attr('transform', 'translate(0,0)')
    .attr('class', 'main axis date')
    .call(yAxis1);


    var g = main.append("svg:g");

    g.selectAll("path")
            .data(data_tri)
            .enter()
            .append("path")
            .attr("d", d3.svg.symbol('cross').size(function(d){ return sizeScale(d[0]);}))
            .style("fill", function(d){ return symbolcolor(d[0]) ;})
            .attr("transform", function(d) { return "translate("+xScale(d[0])+","+yScale(d[1])+")"; });

    g.selectAll("null")
            .data(data_crs)
            .enter()
            .append("path")
            .attr("d", d3.svg.symbol().type('triangle-up').size(function(d){ return sizeScale(d[0]);}))
            .style("fill", function(d){ return symbolcolor(d[0]) ;})
            .attr("transform", function(d) { return "translate("+xScale(d[0])+","+yScale(d[1])+")"; });

Answer 1

Проблема, связанная с ошибками пути, связана с такими строками:

svg.selectAll("path")
  .data(data_tri)
  .enter().append("path")
  .attr("class", "point")
  .attr("d", d3.svg.symbol().type("triangle-up").size(function(d){ return scale(d); }))

Вы рассчитываете размер, используя функцию, которая принимает аргумент d, который, как я предполагаю, должен быть данными от каждого элемента в data_tri или data_crs, но d не определен. Я думаю, что вы хотели сделать это:

.attr("d", function(d){
    // d is now each datum
})

Однако, если вы посмотрите на каждый элемент d, это массив, поэтому этот код:

.size(function(d){ return scale(d); })

выдаст ошибку, потому что входные данные для scale(x) не должны быть массивом. Я не вижу, где в ваших наборах данных вы указали значение, которое следует масштабировать, поэтому я не могу предложить исправления для этого. Я собираюсь полностью опустить этот бит и просто установить тип фигуры для каждого набора точек:

svg.selectAll("path")
  .data(data_tri)
  .enter().append("path")
  .attr("class", "point")
  .attr("d", d3.svg.symbol().type("triangle-up")() )
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

svg.selectAll("path")
  .data(data_crs)
  .enter().append("path")
  .attr("class", "point")
  .attr("d", d3.svg.symbol().type("cross")() )
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

Следующая проблема состоит в том, что ваши элементы данных не имеют d.x и d.y, они являются массивами из двух элементов, поэтому ваша функция преобразования возвращает translate(undefined, undefined). Предполагая, что ваши массивы имеют вид [x, y], функция преобразования должна быть

  .attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });

Последние два утверждения таковы:

svg.selectAll("path")
  .data(data_tri)
  .enter().append("path")
  .attr("class", "point")
  .attr("d", d3.svg.symbol().type("triangle-up")() )
  .attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });

svg.selectAll("path")
  .data(data_crs)
  .enter().append("path")
  .attr("class", "point")
  .attr("d", d3.svg.symbol().type("cross")() )
  .attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });

Теперь вы должны обнаружить, что на диаграмме появляются точки данных, и вы можете приступить к разработке эффективного масштабирования и раскраски диаграммы.