Обновить шаблон с выбором линии линии

Я пытаюсь использовать шаблон ввода(), update(), exit() для линейной диаграммы, и я не получаю, чтобы мои строки отображались правильно.Обновить шаблон с выбором линии линии

Пример скрипки. http://jsfiddle.net/wy6h1jcg/

они показывают в Доме, но не имеют й или у значения (хотя они оформлены)

Мой SVG уже создан следующим образом:

var chart = d3.select("#charts") 
       .append("svg") 
chart 
    .attr("width", attributes.chartsWidth) 
    .attr("height", attributes.chartsHeight);

Я хочу, чтобы создать новый объект для моей привязки обновления следующим образом:

var thechart = chart.selectAll("path.line").data(data, function(d){return d.x_axis}) 

     thechart.enter() 
      .append("path") 


     thechart.transition().duration(100).attr('d', line).attr("class", "line");

Но это нехорошо.

Заметим, что это действительно работает (но не может быть использована для нашего обновления):

chart.append("path") 
     .datum(data, function(d){return d.x_axis}) 
     .attr("class", "line") 
     .attr("d", line);

Еще одно замечание:

У меня есть отдельная функция, которая связывает данные для создания другой диаграммы на SVG.

var thechart = chart.selectAll("rect") 
       .data(data, function(d){return d.x_axis}); 

       thechart.enter() 
       .append("rect") 
       .attr("class","bars")

Могут ли эти два связывания взаимодействовать?

источник

2014-09-16 in code veritas

Я заметил, что вы используете * геодезический *, а не * данные *. Это то, что вы намеревались? – user1614080

Я использую datum в моем примере, но это не соответствует шаблону обновления. Вы не можете создавать соединения с данными –

Это было то место, где я собирался. Можете ли вы опубликовать рабочий пример в скрипке или подобном? Тем временем [это] (http://bl.ocks.org/phil-pedruco/10277224) пример может указать вам в правильном направлении. – user1614080

Это логика обновления я закончил на, по-прежнему closured картина:

function updateScatterChart(chartUpdate) { 

     var wxz = (wx * 37) + c; 

     var x = d3.scale.linear() 
      .range([c, wxz]); 

     var y = d3.scale.linear() 
      .range([h, hTopMargin]); 

     var line = d3.svg.line() 
      .x(function(d) { return x(+d.x_axis); }) 
      .y(function(d) { return y(+d.percent); }).interpolate("basis"); 

     if (lastUpdateLine != chartUpdate) { 
      console.log('updating..') 
      d3.csv("./data/multiline.csv", function(dataset) { 


       console.log(chartUpdate); 

       var data2 = dataset.filter(function(d){return d.type == chartUpdate}); 


       x.domain(d3.extent(data2, function(d) { return +d.x_axis; })); 
       y.domain([0, d3.max(data2, function(d) { return +d.percent; })]); 

       var thechart2 = chart.selectAll("path.line").data(data2, function(d){return d.neighborhood;}); 

        thechart2.enter() 
        .append("svg:path") 
        .attr("class", "line") 
        .attr("d", line(data2)) 


       thechart2.transition() 
        .duration(800) 
        .attr("d", line(data2)) 
        .style("opacity", (chartUpdate == 'remove') ? 0 : 1) 

       thechart2.exit() 
        .transition() 
        .duration(400) 
        .remove(); 


       }) 
     } 
     lastUpdateLine = chartUpdate; 

}

источник

2014-09-16 16:24:23

Обновить шаблон с выбором линии линии

ответ

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