d3.js：グリフコンで軸テキストラベルを変更する

Question

私はd3jsが新しく、2軸といくつかの矩形を使っていくつかのデータを表示する簡単なグラフを操作しようとしています。

オブジェクトの名前を使ってy軸にデータの範囲を設定しました。このオブジェクトには、「技術的」または「標準的」のタイプもあります。 私はこの "テクニカル"または "カノニカル"をブートストラップのグリフコンに置き換えようとしています。私はここで

//datas is the data structure containing my chart datas. 
//objects will be the array use for the domain 
var objects = datas.map(function (d) { 
    return d.object + getExchangeObjectType(d.type); 
}); 

var margin = {top: 40, right: 20, bottom: 200, left: 400}, 
    width = 1200 - margin.left - margin.right, 
    height = (objects.length*30) - margin.top - margin.bottom; 

var canonical = "<span class='glyphicon glyphicon-copyright-mark'></span>"; 
var technical = "<span class='glyphicon glyphicon-wrench'></span>"; 

function getExchangeObjectType(type){ 
    if (type == 'Technical') 
     return technical; 
    else 
     return canonical; 
} 

//datas is the data structure containing my chart datas. 
//objects will be the array use for the domain 
var objects = datas.map(function (d) { 
    return d.object + getExchangeObjectType(d.type); 
}); 

var x = d3.scale.ordinal().rangePoints([0, width]); 

var y = d3.scale.ordinal().rangeBands([height, 0],.1,.1); 

// define x & y axis 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("top") 
    .ticks(percents.length) 
; 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(objects.length) 
; 

// define the domain of datas 
y.domain(objects); 
x.domain(percents); 

を適切glyphiconを含む内部のテキストと範囲から件のデータを交換しようとしたが、成功せずに

まし

は、SVG一部です：

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
     "translate(" + margin.left + "," + margin.top + ")"); 


// draw x axis 
svg.append("g") 
    .attr("class", "x axis") 
    .call(xAxis) 
    .selectAll("text") 
    .attr("x",20) 
    .style("text-anchor", "end") 
; 

// draw y axis 
svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .selectAll("text") 
    .style("text-anchor", "end")  
; 
svg.selectAll("bar") 
    .data(datas) 
    .enter().append("rect") 
    .style("fill", function (d) { return getColor(d.value);}) 
    .attr("y", function(d){return d.object + getExchangeObjectType(d.type);}) 
    .attr("height", y.rangeBand()) 
    .attr("x", 0) 
    .attr("width", function(d) { return (d.value * width)/100 ; }) 
; 

Answer 1

私が見つけました私のソリューションは、ユニコードを使用して！ ラベルのテキストに自分のタイプを追加し、ユニコードに置き換えました：

.text(function(d){ 
    var oldText=d.split(":"); 
    if (oldText[1]=="Canonical") 
     return oldText[0]+" \ue194"; 
    else 
     return oldText[0]+" \ue136" 
})