在X軸蜱上呈現HTML

我想在我的D3圖的x軸上呈現HTML。基本上，我希望軸上的每個標籤都是超鏈接到數據中的另一列。在X軸蜱上呈現HTML

我已經試過

x.domain(data.map(function(d) { return "<a href=\"" + d.SiteUrl + "\">" + d.Name + "</a>"; }));

，但它不工作，在所有。

<a href="http://example.com">Something</a>

我也試着在x軸添加

.tickFormat(function(d) { return "<a href=\"" + d.SiteUrl + "\">" + d.Name + "</a>"; })

，以及改變.attr("x", ...)到

：除了得到一個超級鏈接我得到的實際文本值

.attr("x", function(d) { return "<a href=\"" + d.SiteUrl + "\">" + x(d.Name) + "</a>"; })

在圖表本身。

我錯過了什麼嗎？

來源

2016-05-18 202_accepted

你不能追加的HTML SVG，除非你使用不廣泛使用的異物。我會建議獲取每個勾號的位置，並將html附加到該位置以獲得svg的父親 – thatOneGuy

我假設我無法在SVG中呈現任何HTML轉義字符，那麼呢？（我遇到的另一個問題，其中一個'Name'值有'&'。） –

nope no can do。檢查這個例子：http://stackoverflow.com/questions/7458546/html-in-svg-in-html使用外部對象 – thatOneGuy

（基於https://groups.google.com/d/msg/d3-js/zoUjrm75iCg/EJg0YhnTw3YJ）

的技巧是使用svg:foreignObject（如評論意見@thatOneGuy規定），那麼你可以將軸標籤內的任何HTML。下面的html處的函數通過data[i].name，其中可以放置任意的HTML。

var height = 500; 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickSize(0).tickPadding(0).tickFormat(function(d) {return '';}); 

var tx = -5; 
var ty = 2; 
var tw = 50; 
var th = 10; 

chart.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("g") 
    .append("svg:foreignObject") 
    .attr("width",tw) 
    .attr("height",th) 
    .attr("x", tx) 
    .attr("y", ty) 
    .append("xhtml:div") 
    .attr("class", "my-x-axis-label") 
    .html(function(schema) {return schema;});

CSS：

div.my-x-axis-label { 
    font: 10px sans-serif; 
}

來源

2016-08-21 06:46:08 koppor

在X軸蜱上呈現HTML

回答

相關問題