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] + ")"; });

现在，您应该发现正在将数据点显示在图表上，并且可以开始研究如何有效地缩放和着色图表。