1

我正在尝试使用 D3Plus 构建散点图以显示合规性数字，并希望为不同的点创建一个图例 - 但是当我将图例函数添加到我的图表时，页面上没有显示任何内容。这是我正在使用的代码：

<!doctype html>
<meta charset="utf-8">

<!-- load D3js -->
<script src="/lib/d3/d3.js"></script>

<!-- load D3plus after D3js -->
<script src="/lib/d3plus/d3plus.js"></script>

<!-- create container element for visualization -->
<div id="viz" style = "height: 90vh; width: 99vw;"></div>

<script>
  // sample data array
  var sample_data = [
    //Quad I
    {"% In Compliance": 100, "% In App": 100, "name": "1"},
    //Quad II
    {"% In Compliance": -3, "% In App": 100, "name": "2"},
    {"% In Compliance": -26, "% In App": 100, "name": "3"},
    {"% In Compliance": -55, "% In App": 100, "name": "4"},
    {"% In Compliance": -76, "% In App": 100, "name": "5"},
    //Quad III
    {"% In Compliance": -36, "% In App": -25, "name": "6"},
    {"% In Compliance": -66, "% In App": -4, "name": "7"},
    //Quad IV
    {"% In Compliance": 96, "% In App": -1, "name": "8"},
    {"% In Compliance": 87, "% In App": -1, "name": "9"},
    {"% In Compliance": 72, "% In App": -5, "name": "10"},
    {"% In Compliance": 55, "% In App": -6, "name": "11"},
    {"% In Compliance": 52, "% In App": -5, "name": "12"},
    {"% In Compliance": 45, "% In App": -5, "name": "13"},
    {"% In Compliance": 38, "% In App": -1, "name": "14"},
    {"% In Compliance": 29, "% In App": -2, "name": "15"},
    {"% In Compliance": 19, "% In App": -7, "name": "16"},
    {"% In Compliance": 9, "% In App": -7, "name": "17"}
  ]


  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .data(sample_data)  // data to use with the visualization
    .type("scatter")    // visualization type
    .id("name")         // key for which our data is unique on
    .x({value:"% In Compliance", range:[-104,104]})         // key for x-axis
    .y({value:"% In App", range:[-104,106]})        // key for y-axis
    .axes({"ticks": false})
    .format({ "text" : function( text , key ) {
        return text;
        } 
    })
    .legend({"size": 50})
    .size(25)
    .draw()             // finally, draw the visualization!
</script>
4

1 回答 1

2

为了让图例出现，您必须明确设置颜色方法。默认情况下，形状根据其 ID 着色，因此在您的情况下，您需要做的就是添加以下行：

.color("name")
于 2016-07-22T21:02:11.517 回答