文本轉換D3.js

我一直在互聯網上搜索的文本採取兩個xy座標，從第1轉換它2點，但似乎無法找到任何簡單的小提琴，如果任何人的任何實例知道它將不勝感激。然而，在主要觀點這第一段代碼成功地繪製了點的中心的文本。文本轉換D3.js

svg.selectAll("text") 
    .data(data) 
    .enter() 
    .append("text") 
    .text(function(d) { 
     return d.Name; 
    }) 
    .attr("x", function(d) { 
     return xScale(d.x); 
    }) 
    .attr("y", function(d) { 
     return yScale(d.y); 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "0.5px") 
    .style('text-anchor','middle') 
    .attr("fill", "black")

這種轉變是對文本和過渡切換到新的位置

svg.selectAll('text') 
    .on('click', function (d) { 

    svg.selectAll("text") 
    d3.selectAll("text") 
    .transition() 
    .duration(1000) 

    .data(data) 
    .enter() 
    .append("text") 
    .text(function(d) { 
     return d.newNames; 
    }) 
    .attr("x", function(d) { 
     return xScale(d.xx); 
    }) 
    .attr("y", function(d) { 
     return yScale(d.yy); 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "black") 
    })

不工作，不顯示文本，但也提出了在控制檯中沒有錯誤的嘗試。我以前用SVG圖形做到了這一點，它的工作原理完全一樣的方式，但不管是什麼原因，我似乎無法得到它的文本轉換任何幫助表示讚賞感謝

來源

2016-01-12 Tyler Cowan

您的代碼有點兒工作，但有點奇怪。首先，0.5px您最初的字體大小不會在Chrome渲染我。其次，您的轉換代碼有以下語法錯誤：第三，您應該綁定數據，然後在轉換過程中進行轉換而不進行綁定。另外，如果您只想移動現有文本並且數據沒有更改，爲什麼要重新綁定？你當然不需要.enter().append()。

這就是我認爲你是後：

svg.selectAll('text') 
    .on('click', function(d) { 
    svg.selectAll("text") 
     .transition() 
     .duration(1000) 
     .text(function(d) { 
     return d.newNames; 
     }) 
     .attr("x", function(d) { 
     return d.xx; 
     }) 
     .attr("y", function(d) { 
     return d.yy; 
     }) 
     .attr("font-family", "sans-serif") 
     .attr("font-size", "30px") 
     .attr("fill", "black") 
    });

全碼：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var data = [{ 
 
     x: 20, 
 
     y: 20, 
 
     xx: 200, 
 
     yy: 200, 
 
     Name: "Hello", 
 
     newNames: "GoodBye" 
 
    },{ 
 
     x: 100, 
 
     y: 20, 
 
     xx: 300, 
 
     yy: 200, 
 
     Name: "Love", 
 
     newNames: "Hate" 
 
    }]; 
 

 
    var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 500) 
 
     .attr('height', 500); 
 

 
    svg.selectAll("text") 
 
     .data(data) 
 
     .enter() 
 
     .append("text") 
 
     .text(function(d) { 
 
     return d.Name; 
 
     }) 
 
     .attr("x", function(d) { 
 
     return d.x; 
 
     }) 
 
     .attr("y", function(d) { 
 
     return d.y; 
 
     }) 
 
     .attr("font-family", "sans-serif") 
 
     .attr("font-size", "14px") 
 
     .style('text-anchor', 'middle') 
 
     .attr("fill", "black"); 
 

 

 
    svg.selectAll('text') 
 
     .on('click', function(d) { 
 
     svg.selectAll("text") 
 
      .transition() 
 
      .duration(1000) 
 
      .text(function(d) { 
 
      return d.newNames; 
 
      }) 
 
      .attr("x", function(d) { 
 
      return d.xx; 
 
      }) 
 
      .attr("y", function(d) { 
 
      return d.yy; 
 
      }) 
 
      .attr("font-family", "sans-serif") 
 
      .attr("font-size", "30px") 
 
      .attr("fill", "black") 
 
     }) 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-01-12 16:59:28 Mark

感謝標誌這是非常有幫助的 –

我實現了這個在我的代碼我得到的文本的價值改變，但沒有運動。主要的區別是，我的代碼被包裹在裏面d3.csv（「Data.csv」，函數（數據）{代碼在這裏}錯誤：遺漏的類型錯誤：無法讀取未定義 –

@TylerCowan的特性「新名稱」，這意味着什麼是錯的與您的數據綁定和'函數（d）的'd'{返回d.NewName}'沒有定義。對於我來說，以進一步幫助你，你需要創建的jsfiddle或plnkr.co再現錯誤。 – Mark

回答

相關問題