从第二个数据源附加到SVG组

Question

我正在努力开发一个项目，我需要根据两个不同文件中的Json数据生成分组数据行并绘制点。

我最初需要放置一系列点，然后在按下按钮后添加另一个系列。出于测试目的，我有两个Json文件：一个用于销售，一个用于购买。每个文件都有两个客户，其中包含用于销售或购买的嵌套数据。我按公司分组，为每次销售画一个红点，用这个代码。这非常有效：

function loadSVG() {
    //Load in GeoJSON data
    //d3.json("data/zzMonthlySalesAndBuysComb.json", function (json) {
    d3.json("data/zzMonthlySales2.json", function (json) {

        g = svg.append('g').classed("chart", true)
          .attr("width", w)
          .selectAll(".csMove")
          .data(json, function (d) { return d.CompanyName + d.Company; })
          .enter()
          .append("g")
          .classed("csMove", true)
          //.attr({ width: w, height: 100  })
          //.attr("transform", function (d, i) {
              //return "translate(0," + h / 2 + ")";
          //})
          .attr("transform", function (d, i) { return "translate(0, " + i * 100 + ")"; })
          .append("g")
          .classed("CustomerBox", true);

        //This test code 
        g.append("rect")
          .attr("width", w)
          .attr("height", function (d) { return h / 2; })
           .style("fill", "silver");

        var SalesDot = svg.selectAll(".CustomerBox").selectAll(".Sdot")
        //.data(json)
        .data(function (d) { return d.monthlySales })
        .enter()
        .append("g")
        .classed("Sdot", true);

        //then we add the circles in the correct company group
        SalesDot
           .append("circle")
           .attr("cx", function (d) { return ((d.month - 20130001) / 2); })
           .attr("cy", function (d) { return d.sales })
           .attr("r", 5)
           .style("fill", "red");

        //Test - add dots initially

    });
}

这很有效。但这是它失败的地方。我在页面上有一个按钮，当我按下按钮时，我运行此功能将加载购买数据，我只在两组的0,0坐标处得到两个绿点。

function AddToSVG() {

    //Load in GeoJSON data
    //d3.json("data/zzMonthlyBuys2.json", function (json2) {
    d3.json("data/zzMonthlyBuys2.json", function (json2) {

        //add Green Circles.
        var BuysDot = svg.selectAll(".CustomerBox").selectAll(".Bdot")

        .data(json2)
        //.data(function (d) { return d.monthlySales })
        .enter()
        .append("g")
        .classed("Bdot", true);

        //then we add the circles in the correct company group
        BuysDot
           .data(function (d) {
               return d.monthlyBuys;
           })
           .enter()
           .append("circle")
           .attr("cx", function (d) {
               return ((d.monthBuys - 20130001) / 2);
           })
           .attr("cy", function (d) { return d.buys })
           .attr("r", 5)

           .style("fill", "green");
    });
}

具体而言，系统仍然认为d具有来自monthlySales而非MonthlyBuys的数据。当我在return d.monthlyBuys处设置断点时，我看到了这一点。

有谁知道如何解决这个问题？我需要将Buys和MonthlyBuys用于正确客户的现有组。