1
Ich versuche mit D3Plus ein Streudiagramm zu erstellen, um Übereinstimmungszahlen anzuzeigen, und möchte eine Legende für die verschiedenen Punkte haben - aber wenn ich die Legendenfunktion zu meinem Diagramm hinzufüge, Auf der Seite erscheint nichts. Hier ist der Code, den ich verwende:Legende erscheint nicht in D3Plus Streudiagramm
<!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>