D3图表问题，数据绑定不起作用

Question

Working on a D3 chart and want to change value of chart based on changes in data (held in scope).

So far all the logs come through properly, my $scope.watch call is working and calling the function. New, updated data shows up in the logs, but the chart isn't changing.

Any thoughts on how to debug?

  .directive('barsChart', function($parse) {
  var directiveDefinitionObject = {
      restrict: 'E',
      scope: {data: '=chartData'},
      link: function (scope, element, attrs) {
      scope.$watch('data', function(newVals, oldVals) {
            triggerRelink();
        }, true);

      var triggerRelink = function() {

        console.log("this is the scope", scope.data);
        var margin = {
            top: 25,
            right: 75,
            bottom: 85,
            left: 85
          },
            w = 600 - margin.left - margin.right,
            h = 350 - margin.top - margin.bottom;
        var padding = 10;

        var colors = [
            ["Local", "#2ba8de"],
            ["Global", "#318db4"]
          ];

        var dataset = [{
            "keyword": "Current Home",
            "global": 0,
            "local": scope.data[0]
           }, {
            "keyword": "Extra Bathroom",
            "global": 0,
            "local": scope.data[1]
        }
      ];
      console.log("the dataset", dataset);
        var xScale = d3.scale.ordinal()
            .domain(d3.range(dataset.length))
            .rangeRoundBands([0, w], 0.05);
        // ternary operator to determine if global or local has a larger scale
        var yScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function (d) {
            return (d.local > d.global) ? d.local : d.global;
        })])
            .range([h, 0]);
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .tickFormat(function (d) {
            return dataset[d].keyword;
        })
            .orient("bottom");
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .ticks(5);

          var commaFormat = d3.format(',');

        // existing
          var svg = d3.select(element[0])
          .append("svg")
           .attr("width", w + margin.left + margin.right)
           .attr("height", h + margin.top + margin.bottom)
           .append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

           // Graph Bars
          var sets = svg.selectAll(".set")
              .data(dataset)
              .enter()
              .append("g")
              .attr("class", "set")
              .attr("transform", function (d, i) {
              return "translate(" + xScale(i) + ",0)";
          });
          sets.append("rect")
              .attr("class", "local")
              .attr("width", xScale.rangeBand() / 2)
              .attr("y", function (d) {
              return yScale(d.local);
          })
              .attr("x", xScale.rangeBand() / 2)
              .attr("height", function (d) {
              return h - yScale(d.local);
          })
              .attr("fill", colors[0][1]);

              sets.append("rect")
                  .attr("class", "global")
                  .attr("width", xScale.rangeBand() / 2)
                  .attr("y", function (d) {
                  return yScale(d.global);
              })
                  .attr("height", function (d) {
                  return h - yScale(d.global);
              })
                  .attr("fill", colors[1][1]);
              // xAxis
              svg.append("g") // Add the X Axis
              .attr("class", "x axis")
                  .attr("transform", "translate(0," + (h) + ")")
                  .call(xAxis)
                  .selectAll("text")
                  .style("text-anchor", "end")
                  .attr("dx", "-.8em")
                  .attr("dy", ".15em")
                  .attr("transform", function (d) {
                  return "rotate(-25)";
              });
              // yAxis
              svg.append("g")
                  .attr("class", "y axis")
                  .attr("transform", "translate(0 ,0)")
                  .call(yAxis);
              // xAxis label
              svg.append("text")
                  .attr("transform", "translate(" + (w / 2) + " ," + (h + margin.bottom - 5) + ")")
                  .style("text-anchor", "middle");
                  // .text("Renovation Type");
              //yAxis label
              svg.append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 0 - margin.left)
                  .attr("x", 0 - (h / 2))
                  .attr("dy", "1em")
                  .style("text-anchor", "middle")
                  .text("Home Value");
        };
        triggerRelink();
      }
  };
  return directiveDefinitionObject;
})

Answer 1

You will need to remove the old svg in the triggerRelink() which is called in the watch function something like shown below:

var svg = d3.select(element[0]).select("svg").remove();
//append the new svg
var svg = d3.select(element[0])
      .append("svg")
       .attr("width", w + margin.left + margin.right)
       .attr("height", h + margin.top + margin.bottom)
       .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");