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中每个项目的数据，但是{{ 1}}未定义。我想您想这样做：

但是，如果您查看每个.attr("d", function(d){ // d is now each datum })项目，它都是一个数组，因此此代码：

将引发错误，因为.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] + ")"; });

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

D3.js散点图与符号

1 个答案: