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

下一个问题是您的数据项没有 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] + ")"; });

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

D3.js 带符号的散点图

D3.js Scatterplot with symbols

javascript

scatter-plot

d3.js