D3.js散點圖與符號

Question

我正在嘗試繪制60個點：30個向上的等邊三角形和30個十字。 每個符號的X和Y坐標是一個介於0和100之間（含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 + ")"; });

下一個問題是您的數據項沒有dx和dy ，它們是兩個項目的數組，因此您的轉換函數返回的是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] + ")"; });

現在，您應該發現正在將數據點顯示在圖表上，並且可以開始研究如何有效地縮放和着色圖表。