Question

我正在使用d3js中的符号创建折线图。我需要了解如何获取应用的符号类型，以便根据输入更改样式属性。目前，当我改变符号的颜色时，它们会从图表区域消失。目前我从数组中获取符号，但是我想根据应用在图表上的符号来检索它们，因为用户可以更改图表上的符号类型，因此当前从数组中检索将不起作用。我正在添加其他代码来显示符号的创建。我遵循以下示例http://bl.ocks.org/mbostock/3884955

我正在添加代码，我根据用户输入更改符号。它具有用于更改颜色的相同过滤器，但是如果我在更改符号之前更改了颜色，则此过滤器可以完美地显示符号以及颜色变化。

var color = function(i) {
    var colors2 = ["#CA0000", "#A2005C",
                  "#7EBD00", "#007979"];
    return colors2[i % colors2.length]
    };


var symbol = function(i) {
    var symbols = ["circle", "diamond", "square",
                   "triangle-up", "triangle-down", "cross"];
    return d3.svg.symbol()
             .size(81)
             .type(symbols[i % symbols.length]);
};

cities.forEach(function(dataset, i) {



    svg.selectAll(".point" )
    .data(dataset.values)
  .enter().append("path")
    .attr('id','symbolTrack2'+i)
    .attr("class", "point" + i)
    .attr("fill", color(i))
    .attr("stroke", "transparent")
    .attr("d", symbol(i).size(100))
    .attr("transform", function(d) {
      return "translate(" + x(d.date) +
                          "," + y(d.temperature) + ")";
    });
}

$scope.changeSymbolcolor =function(d) {
         var newHeight = $scope.config.symbolColor;
         d3.selectAll("path")
          .filter(function(d,i) { 
              var check;
              if(this.id == selectedIdForChange) {
                  check = true; 
                 } else {
                  check = false;
                 }

              return check; })
          .transition().attr("d", function(d,i){return symbol(i)}).attr('fill',newHeight);
         };



$scope.chartSymbolChange=function() {
         var newSymbol = $scope.config.chartSymbol;
         d3.selectAll("path")
          .filter(function(d,i) { 
              var check;
              if(this.id == selectedIdForChange) {
                  check = true; 
                 } else {
                  check = false;
                 }

              return check; })
          .transition().delay(0).duration(1000).attr("d", d3.svg.symbol().type(newSymbol));
         };

D3JS符号样式转换

0 个答案: