删除逗号以区分D3中的数千个轴标签组

Question

我从http://bl.ocks.org/stepheneb/1182434中获取了此重绘功能，我想对其进行修改。

如何删除千位组的逗号分隔符？在代码中console.log（self.x.ticks（10）.map（self.x.tickFormat（2，“.1”）））工作并产生这种格式的数字：[“0”，“1000”， “2000”，..]，这是我想要的。当我把它放在.data（）中时，我会得到[“0”，“1,000”，“2,000”，..]。 我正在使用缩放，所以我无法硬编码标签。

代码的主要部分应该是：

fx = self.x.tickFormat(10), 
    //fx = self.x.tickFormat(d3.format("f2")), //does not work 
    fy = self.y.tickFormat(10); 

    // Regenerate x-ticks… 
    var gx = self.vis.selectAll("g.x") 
      .data(self.x.ticks(10).map(self.x.tickFormat(2, ".1")), String) 
      .attr("transform", tx); 

    console.log(self.x.ticks(10).map(self.x.tickFormat(2, ".1"))) 


    gx.select("text") 
      .text(fx); 

整个重绘功能：

SimpSimpleGraph.prototype.redraw = function() { 
var self = this; 
return function() { 
    var tx = function(d) { 
     return "translate(" + self.x(d) + ",0)"; 
    }, 
    ty = function(d) { 
     return "translate(0," + self.y(d) + ")"; 
    }, 
    stroke = function(d) { 
     return d ? "#ccc" : "#666"; 
    }, 
    fx = self.x.tickFormat(10), 
    //fx = self.x.tickFormat(d3.format("f2")), //does not work 
    fy = self.y.tickFormat(10); 

    // Regenerate x-ticks… 
    var gx = self.vis.selectAll("g.x") 
      .data(self.x.ticks(10).map(self.x.tickFormat(2, ".1")), String) 
      .attr("transform", tx); 

    console.log(self.x.ticks(10).map(self.x.tickFormat(2, ".1"))) 


    gx.select("text") 
      .text(fx); 

    var gxe = gx.enter().insert("g", "a") 
      .attr("class", "x") 
      .attr("transform", tx); 

    gxe.append("line") 
      .attr("stroke", stroke) 
      .attr("y1", 0) 
      .attr("y2", self.height); 

    gxe.append("text") 
      .attr("class", "axis label") 
      .attr("y", self.height) 
      .attr("dy", "1em") 
      .attr("text-anchor", "middle") 
      .text(fx) 
      .style("cursor", "ew-resize") 
      .on("mouseover", function(d) { d3.select(this).style("font-weight", "bold");}) 
      .on("mouseout", function(d) { d3.select(this).style("font-weight", "normal");}) 
      .on("mousedown.drag", self.xaxis_drag()) 
      .on("touchstart.drag", self.xaxis_drag()); 

    gx.exit().remove(); 

    // Regenerate y-ticks… 
    var gy = self.vis.selectAll("g.y") 
      .data(self.y.ticks(10), String) 
      .attr("transform", ty); 

    gy.select("text") 
      .text(fy); 

    var gye = gy.enter().insert("g", "a") 
      .attr("class", "y") 
      .attr("transform", ty) 
      .attr("background-fill", "#FFEEB6"); 

    gye.append("line") 
      .attr("stroke", stroke) 
      .attr("x1", 0) 
      .attr("x2", self.width); 

    gye.append("text") 
      .attr("class", "axis label") 
      .attr("x", -3) 
      .attr("dy", ".35em") 
      .attr("text-anchor", "end") 
      .text(fy) 
      .style("cursor", "ns-resize") 
      .on("mouseover", function(d) { d3.select(this).style("font-weight", "bold");}) 
      .on("mouseout", function(d) { d3.select(this).style("font-weight", "normal");}) 
      .on("mousedown.drag", self.yaxis_drag()) 
      .on("touchstart.drag", self.yaxis_drag()); 

    gy.exit().remove(); 
    //This zoom is call after the plot has loaded 
    self.plot.call(d3.behavior.zoom().x(self.x).y(self.y).on("zoom", self.redraw())); 

    self.update(); 
    }  
} 

Answer 1

至于改变的方式D3输出数字，我一点都不知道线索。但是你可以使用字符串原型.replace来改变这些值。

例

var someString = 'The catcher in the rye'; 
someString.replace('catcher','captcha'); //"The captcha in the rye" 

这里是你如何运用这一个数组。 http://jsfiddle.net/sq2johrv/1/