d3.js：突出显示的x轴标记的列/条形图

Question

我在D3.js.写入简化的柱形图脚本上

这里有一个小提琴：http://jsfiddle.net/rolfsf/F36Vw/

的目的是比较一些小的项目，比重点项目大的。

这样的：

如何选择和突出$ 750K x轴的标签，我怎么可以添加额外的标签，以识别焦点项（ACE小工具）？

我正在寻找的东西比瞄准中间;-)

我的数据更精确目前看起来是这样的（可以很容易地改变）：

var data = { 

    "sales": [ 
      [600, 1], 
      [650, 2], 
      [700, 3], 
      [750, 2], 
      [800, 1], 
      [850, 2], 
      [900, 3] 
    ] 
}; 

和列脚本在这里：

function miniColumnChart(){ 

    var barWidth = 20; 
    var margin = { 
     top: 64, 
     right: 32, 
     bottom: 64, 
     left: 32, 
     labels: 32 
    }; 
    var height = 300; //overridden by width in call 
    var width = 500; //overridden by width in call  
    var chartTitle = ["test"]; 
    var yAxisLabel = "y axis label"; 
    var xAxisLabel = "x axis label"; 
    var xformat = function(d){return d;}; 
    var focus; 

    function chart(selection) { 
     var maxBarHeight = height - (margin.top + margin.bottom); 
     var chartWidth = width - margin.right - margin.left; 

     d3.select('svg').remove();//remove old charts 

     selection.each(function(data) { 

      var xValue = function(d) { return d[0]; }; 
      var yValue = function(d) { return d[1]; }; 

      var x = d3.scale.ordinal() 
       .domain(data.map(function(d) { return d[0]; })) 
       .rangeRoundBands([margin.labels, chartWidth], 0); 

      var y = d3.scale.linear() 
       .domain([0, d3.max(data, function(d) { return d[1]; })]) 
       .range([maxBarHeight, 0]) 
       .nice(); 

      var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(xformat); 

      //var yAxis = d3.svg.axis().scale(y).orient("left"); 

      var svgContainer = d3.select(this).append("svg") 
       .attr("class", "chart mini-column-chart") 
       .attr("width", width) 
       .attr("height", height).append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      svgContainer.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")") 
       .call(xAxis) 

       .append("text") 
       .attr("class", "axis-label") 
       .attr("x", width/2) 
       .attr("text-anchor", "middle") 
       .attr("dy", 48) 
       .text(xAxisLabel); 

      var header = svgContainer.append("text") 
       .attr("class", "chart-title") 
       .attr("x", width/2) 
       .attr("text-anchor", "middle") 
       .attr("dy", -32) 
       .text(chartTitle); 

      var barValues = svgContainer.append("g") 
       .attr("class", "bar-values"); 

      barValues.selectAll("text") 
       .data(data) 
        .enter().append("text") 
       .attr("x", function(d, i) { 
        return ((i+1) * x.rangeBand()); 
       }) 
       .attr("y", function(d) { return y(d[1]);}) 
       .attr("dy", -5) 
       .attr("text-anchor", "middle") 
       .text(function(d) {return d[1];}); 

      svgContainer.append("g") 
       .attr("class", "y axis")//.call(yAxis) 
       .append("text") 
       .attr("class", "axis-label") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 8) 
       .attr("x", -(height-margin.top-margin.bottom)) 
       //.attr("dy", ".71em") 
       .style("text-anchor", "start") 
       .text(yAxisLabel); 

      var bars = svgContainer.append("g") 
       .attr("class", "bars"); 

      bars.selectAll(".bar") 
       .data(data) 
        .enter().append("rect") 
       .attr("class", "bar") 
       .attr("x", function(d, i) { 
        return ((i+1) * x.rangeBand())-(barWidth/2); 
       }) 
       .attr("y", function(d) { return y(d[1]);}) 
       .attr("width", barWidth) 
       .attr("height", function(d) { 
        return (maxBarHeight -y(d[1])); 
       }); 
     }); 
    } 


    chart.title = function(_) { 
     if (!arguments.length) return chartTitle; 
     chartTitle = _; 
     return chart; 
    }; 

    chart.x = function(_) { 
     if (!arguments.length) return xValue; 
     xValue = _; 
     return chart; 
    }; 

    chart.y = function(_) { 
     if (!arguments.length) return yValue; 
     yValue = _; 
     return chart; 
    }; 

    chart.width = function(_) { 
     if (!arguments.length) return width; 
     width = _; 
     return chart; 
    }; 

    chart.height = function(_) { 
     if (!arguments.length) return height; 
     height = _; 
     return chart; 
    }; 

    chart.barWidth = function(_) { 
     if (!arguments.length) return barWidth; 
     barWidth = _; 
     return chart; 
    }; 

    chart.xformat = function(_) { 
     if (!arguments.length) return xformat; 
     xformat = _; 
     return chart; 
    }; 

    chart.yAxisLabel = function(_) { 
     if (!arguments.length) return yAxisLabel; 
     yAxisLabel = _; 
     return chart; 
    }; 

    chart.xAxisLabel = function(_) { 
     if (!arguments.length) return xAxisLabel; 
     xAxisLabel = _; 
     return chart; 
    }; 

    return chart; 
} 

d3.select('#chart') 
    .datum(data.sales) 
    .call(miniColumnChart() 
    .title("Similar Companies") 
    .xformat(function(d){return '$' + d + 'K';}) 
    .yAxisLabel("# of Similar Companies") 
    .xAxisLabel("Company Size") 
); 

Answer 1

首先，存储到g选择你绘制的轴线成一个参考：

var xAxisG = svgContainer.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")") 
    .call(xAxis) 

然后，您可以选择所有的蜱里面：

xAxisG.selectAll('.tick') 

蜱是含text和line，这d3.axis为您创建g元素。然后在蜱迭代在此选择：

.each(function(d, i) { 
    // In here, d is the ordinal value associated with each tick 
    // and 'this' is the dom element 
}) 

在循环中，你可以“挑”你有兴趣更新蜱，你可以颜色的文字等：

.each(function(d, i) { 
    if(d == 750) { 
     d3.select(this) 
      .append('text') 
      .text("Ace Widgets") 
      .attr({ 
       "text-anchor": "middle", 
       dy: 33, 
       "font-size": ".8em" 
      }) 
     d3.select(this) 
      .selectAll('text') 
       .style("fill", "red") 
    } 

这里的在updated jsfiddle