Question

代码通过websocket接收JSON数据包，并应使用D3制作它们的散点图：

<div class="container">
    <div id="visualisation">
    </div>
</div>

<script - websocket stuff>
// Handle incoming messages
socket.onmessage = function (message) {
// Decode the JSON
    var  data = JSON.parse(message.data);
    var  source = data.source;
    if (data.type === 'Client Data') {
        var value = JSON.parse(data.value);
            graphData(value);
    };
</script>

<script type="text/javascript">
    var margin = {top:20, right: 20, bottom: 30, left:50},
         width = 960 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
         .range([0, width]);
    var y = d3.scale.linear()
         .range([height, 0]);

    var xAxis = d3.svg.axis()
         .scale(x)
         .orient("bottom");

    var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left");

    var svg = d3.select("#visualisation").append("svg")
          .attr("width", width + margin.left + margin.right);

function graphData(data) {
    console.log("graphdata called")

    x.domain(d3.extent(data, function(d) { return d.time; }));
    y.domain(d3.extent(data, function(d) { return d.value; }));

    svg.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0," + height + ")")
         .call(xAxis)

    svg.append("g")
         .attr("class", "y axis")
         .call(yAxis)

    svg.selectAll(".dot")
         .data(data)
         .enter().append("circle")
             .attr("class", "dot")
             .attr("r", 3.5)
             .attr("cx", function(d) { return x(d.time); })
             .attr("cy", function(d) { return y(d.value); });
};
</script>

javascript声称无法找到x（x.domain(d3.extent(data, function(d) { return d.time; }));的属性“domain”。但是，对此行进行注释，在下面的行中显示y的相同问题，以及对于以下行（svg.append("g")）。我已经从在线教程中复制了这个例子，但graphdata函数除外。该例子从csv读取，而这从websocket接收数据。结果，错误可能是在这个功能，但我不确定。

D3 - 元素声称未定义

0 个答案: