試圖使用鏈接創建包裝文本

我正在使用D3和SVG，並試圖通過使用屬性和鏈接來包裝一些文本。這是我當前的代碼：試圖使用鏈接創建包裝文本

vis.append("svg:text") 
    .attr("x", "0") 
    .attr("y", "0") 
    .attr("text-anchor", "middle") 
    .append("svg.tspan") 
    .attr("dy", ".35em") 
    .text("Revenue Split") 
    .text("for Current Month") 
    .attr("transform", "translate(50,50)") 
    .attr("class", "title");

以上是這個答案使用attr翻譯嘗試：https://stackoverflow.com/a/16701952/1179880

我嘗試導致沒有顯示在屏幕上。

更新

與當前的兩個答案的幫助我修改了我的代碼如下：

vis.append("svg:text") 
    .attr("x", "0") 
    .attr("y", "0") 
    .attr("class", "title") 
    .attr("text-anchor", "middle") 
    //.attr("transform", "translate(50,50)") 
    .text("Revenue Split") 
    .append("svg:tspan") 
    .attr("dy", ".35em") 
    .attr("text-anchor", "middle") 
    .text("for Current Month") 
    .attr("class", "title");

它出現在正確的方向前進 - 雖然不大正如預期的那樣，分兩條線路。文本顯示如下...

來源

2016-10-10 whytheq

你必須定義爲text元素的文本，然後定義爲tspan元素的文本：您使用

vis.append("text") 
.attr("x", "0") 
.attr("y", "0") 
.attr("text-anchor", "middle") 
.text("Revenue Split") 
.append("tspan") 
.attr("x", "0") 
.attr("dy", ".35em") 
.text("for Current Month") 
.attr("class", "title");

來源

2016-10-10 11:50:50

這已經幫助了很多，但仍然行爲不端的 - 請截圖我已添加到原始文章 – whytheq

如果您希望「當前月份」處於「收入分成」之下，則必須設置「x」。值，並可能增加'dy'。我剛剛編輯了答案，請檢查它。 –

一旦這個「.35em」調整到這個「1.1em」，事情就會開心。 – whytheq

一個。當你需要：作爲TSPAN元素D3命名空間分隔符（你得到它的正確的文本元素）
變換可能適用於文本元素等都需要來的TSPAN創建之前
兩個文本內容會覆蓋，每個元素只能有一個。

總體而言，你可能想是這樣的......

vis.append("svg:text") 
    .attr("x", "0") 
    .attr("y", "0") 
    .attr("text-anchor", "middle") 
    .attr("transform", "translate(50,50)") 
    .text("Revenue Split") 
    .append("svg:tspan") 
    .attr("dy", ".35em") 
    .text("for Current Month") 
    .attr("class", "title");

來源

2016-10-10 11:51:48

是的，我正要問OP，如果該點而不是冒號是一個錯字。 –

（上週只讀首字母縮寫詞'svg'，所以感謝您發現錯字！） – whytheq

@Robert - 這幫助了很多，但仍然行事不端 - 請看截圖我已添加到原始文章 – whytheq

此代碼由Mark在評論上述工作：

vis.append("svg:text") 
     .attr("x", "0") 
     .attr("y", "0") 
     .attr("class", "title") 
     .attr("text-anchor", "middle") 
     .text("Revenue Split") 
     .append("svg:tspan") 
     .attr("dy", "1.1em") 
     .attr("x", 0) 
     .attr("text-anchor", "middle") 
     .text("for Current Month") 
     .attr("class", "title");

來源

2016-10-10 15:56:36 whytheq

試圖使用鏈接創建包裝文本

回答

相關問題