Text Transition on Click D3.js

Я искал в Интернете простую скрипку с текстом с двумя координатами xy и переходом его из пункта 1 в пункт 2, но, похоже, ничего не может найти, если кто-нибудь знает какие-либо примеры было бы высоко оценено. Однако к основному пункту Этот первый фрагмент кода успешно отображает текст в центре точки.Text Transition on Click 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 не отображает для меня в хроме. Во-вторых, ваш код перехода имеет синтаксическую ошибку в:

svg.selectAll("text") 
d3.selectAll("text")

В-третьих, вы должны быть обязательные данные, а затем делает переход и не является обязательным во время перехода. Кроме того, если вы хотите только переместить существующий текст, и ваши данные не изменились, зачем вообще переписывать? И вам, конечно, не нужно .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', function (data) {CODE HERE} ERROR: Uncaught TypeError: Не удается прочитать свойство NewName неопределенного –

@TylerCowan, это означает, что что-то не так с привязкой данных, а функция 'd' in' (d) {return d.NewName} 'не определена. Для того, чтобы помочь вам дальше, вам нужно создать jsFiddle или plnkr.co, который воспроизводит ошибку. – Mark

ответ

Смежные вопросы