删除逗号以分隔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/

Answer 2

使用.ticks(myTicksCount, '.f')而不是.ticks（myTicksCount）删除逗号以分隔成千上万的组。

有关详细信息，请参阅文档

https://github.com/d3/d3-axis/blob/master/README.md#axis_ticks

https://github.com/d3/d3-axis/blob/master/README.md#axis_tickFormat

https://github.com/d3/d3-format

您可以在http://bl.ocks.org/zanarmstrong/05c1e95bf7aa16c4768e上测试格式说明符（包括您自己的格式说明符）