Javascript 如何为ds3内存中的数据应用enter（）和data（）方法

我已将数据从WebSocket连接加载到数组变量“data”中。我可以看到数组中的50个元素，它们确实有正确的映射元素

以下代码段可以正常工作：最后，“数据”元素已转换所有行：

    data.forEach(function (d) {
        d[date] = parseDate(d[date]);
        d[close] = +d[close];
   });

现在，如何将此数据数组应用于内部d3“值”，以便后续d3 dom操作使用该数据？在下一个片段中，我根据我看到的示例/博客进行了尝试：

    var svg = d3.select("body").selectAll("svg")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            /* The following is NOT the correct place/way to do it.. need help here! */
            .data(data)
            .enter()
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

更新我刚刚尝试移动这两行数据（data）和.enter（），现在将它们放在selectAll（）之后

结果如何？我们现在确实有数据了！也许是好事太多了

编辑以下是整个功能

function updateD3(data) {

    var WIDTH = 1800, HEIGHT = 800;


    var margin = {top: 120, right: 20, bottom: 120, left: 100},
            width = WIDTH - margin.left - margin.right,
            height = HEIGHT - margin.top - margin.bottom;

    var parseDate = d3.time.format("%m-%d-%Y %H").parse;

    var x = d3.time.scale()
            .range([0, width]);

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

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

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

    var line = d3.svg.line()
            .x(function (d) {
                return x(d[date]);
            })
            .y(function (d) {
                return y(d[close]);
            });

    var myNode = document.body;
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }

    var len = data.length;
    console.log("data size=" + len + " date: " + data[0][date] + " close: " + data[0][close]
            + " last value: date: " + data[len-1][date] + " close: " + data[len-1][close]);
   var date = "CALL_HOUR";
   var close = "DROPPED_CALL";
    data.forEach(function (d) {
        d[date] = parseDate(d[date]);
        d[close] = +d[close];
    });

    var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(d3.extent(data, function (d) {
        return d[date];
    }));
    y.domain(d3.extent(data, function (d) {
        return d[close];
    }));


    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-1.1em")
            .attr("dy", ".15em")
            .attr("transform", function (d) {
                return "rotate(-65)"
            });

    svg.append("text")             // text label for the x axis
            .attr("x", width / 2)
            .attr("y", height + margin.bottom)
            .style("text-anchor", "middle")
            .style("font-size", "14px")
            .text("Call Date");

    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Dropped Calls");

    svg.append("path")
            .datum(data)
            .attr("class", "line")
            .attr("d", line);

    svg.append("text")
            .attr("x", (width / 2))
            .attr("y", 0 - (margin.top / 2))
            .attr("text-anchor", "middle")
            .style("font-size", "20px")
            .style("text-decoration", "underline")
            .text("No. of Dropped Calls vs Date Line Chart");

  }

---

通过将数据绑定到

svg

元素，可以创建与数据项相同数量的

svg

元素。我想那不是你想要的。我创建了这个示例，演示了您正在做的事情，同时也展示了如何将数据绑定到单个

g

在单个

g

下摆弄数据的一部分：

var data = [10,20,30];

var svg = d3.select("body")
  .append("svg")
    .attr("class","oneSvg")
    .attr("width", 100)
    .attr("height",100)
  .append("g")
    .attr("transform", "translate(0,0)");

circles = svg.selectAll("circle")
    .data(data);

circles
  .enter()
  .append("circle")
    .attr("cx",function (d) {return d;})
    .attr("cy",20)
    .attr("r",5)
    .style("fill","blue");

---

通过将数据绑定到

svg

元素，可以创建与数据项相同数量的

svg

元素。我想那不是你想要的。我创建了这个示例，演示了您正在做的事情，但也展示了如何将数据绑定到单个

g

，希望是您想要的。为什么不对此做出回答？在你的回答中，请复制你在fiddle页面上的信息，我很乐意接受我已经将其应用到我的应用程序中的任何情况。谢谢…我将其作为官方答案发布。你发布的代码与OP不一致，我无法确定如何修复它以使其工作。你能提供Plunkr或fiddle一些测试数据吗？看起来UpdateD3（）函数做得太多了。它不应该重新创建父svg元素。您不希望每次数据更改时都完全销毁并重新创建D3模型。。。你介意吗？你介意更新变量来对应这里的元素吗？OP中没有“圆圈”元素。我仍然无法使其起作用，因此细节/精度在这里很重要。我尝试用“g”替换“圆圈”-但不起作用。我需要一个更仔细的回复，只使用OP中的元素。谢谢。哦，我有点困惑…回复中的小提琴和评论中的小提琴一样，你提到它帮助了你。我只是将圆用作一些简单数据的模拟元素。如果你对你的数据进行修改会更容易。我需要的是折线图，而不是圆。你能帮我理解如何在手术中做到这一点吗？注意：我现在添加了整个函数。

var data = [10,20,30];

var svg = d3.select("body")
  .append("svg")
    .attr("class","oneSvg")
    .attr("width", 100)
    .attr("height",100)
  .append("g")
    .attr("transform", "translate(0,0)");

circles = svg.selectAll("circle")
    .data(data);

circles
  .enter()
  .append("circle")
    .attr("cx",function (d) {return d;})
    .attr("cy",20)
    .attr("r",5)
    .style("fill","blue");