Question

我是d3js的新手，我正试图操纵一个带有2轴和一些矩形的简单图形来显示一些数据。

我用一些对象名称将数据范围设置到我的y轴。该对象还具有“技术”或“规范”类型。我试图用bootstrap的glyphicon替换这个“技术”或“规范”。

我试图用包含正确的glyphicon的内部文本替换该范围内的数据，但没有成功

//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);

这是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

我发现我的解决方案使用了unicode！我在标签文本中添加了我的类型，然后用unicode替换它：

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

d3.js：用glyphicon改变轴文本标签

1 个答案: