Как изменить домен и диапазон динамиков d3 динамически?

Question

Я хочу, чтобы каждая кривая d3 начиналась сверху в соответствии с ее доменом и диапазоном.

Я использовал начальную точку [x, y] = [1,8.5] или любые точки для кривой, но я не хочу, чтобы верхнее пространство между 8.5 и 10. Оно должно начинаться с 8.5 или любым значением координаты Y.I знаете, что он работает в соответствии с диапазоном [0,10].

Каждая кривая должна работать на

1. Y-координата каждой кривой или путь будет увеличен на основе слов.

2. Координата каждой кривой или пути будет увеличена в зависимости от длины слов.

не хочет менять кривую при изменении домена [1,8.5]?

Код

var path0 = [{x: 1.0, y: 8.5},{x: 2.0, y: 5.0}, {x: 1, y: 1.5}]; 
var path1 = [{x: 3, y: 8.5},{x: 4.0, y: 5.0}, {x: 3, y: 1.5}]; 
var path2 = [{x: 5, y: 8.5},{x: 6.0, y: 5.0}, {x: 5, y: 1.5}]; 
var path3 = [{x: 7, y: 8.5},{x: 8.0, y: 5.0}, {x: 7, y: 1.5}]; 
var path4 = [{x: 1.78, y: 5.0},{x: 1.8, y: 5.0}]; 
console.log(path0); 

var w = 1200, 
    h = 850, 
    p = 40, 

    x = d3.scale.linear().domain([0, 10]).range([p, w - p]), 
    y = d3.scale.linear().domain([0, 10]).range([h - p, p]); 



var line = d3.svg.line() 
     .interpolate("cardinal") 
     .x(function(d) { console.log(d);return x(d.x); }) 
     .y(function(d) { console.log(d); return y(d.y); }); 



var vis = d3.select("body").append("svg:svg") 
     .attr("width", w) 
     .attr("height", h) 
     .append("svg:g"); 

var rules = vis.selectAll("g.rule") 
      .data(x.ticks(10)) 
      .enter().append("svg:g") 
      .attr("class", "rule"); 

rules.append("svg:line") 
    .attr("x1", x) 
    .attr("x2", x) 
    .attr("y1", p) 
    .attr("y2", h - p - 1); 

rules.append("svg:line") 
    .attr("class", function(d) { return d ? null : "axis"; }) 
    .attr("y1", y) 
    .attr("y2", y) 
    .attr("x1", p) 
    .attr("x2", w - p + 1); 

rules.append("svg:text") 
    .attr("x", x) 
    .attr("y", h - p + 3) 
    .attr("dy", ".71em") 
    .attr("text-anchor", "middle") 
    .text(x.tickFormat(10)); 

rules.append("svg:text") 
    .attr("y", y) 
    .attr("x", p - 3) 
    .attr("dy", ".35em") 
    .attr("text-anchor", "end") 
    .text(y.tickFormat(10)); 

vis.selectAll("path.path0") 
    .data([0]) 
    .enter().append("svg:path") 
    .attr("d", function(d) { console.log(d);return line.tension(d)(path0); }) 
    .style("stroke","green"); 
    vis.append("text") 
.attr("x", (w/2))    
.attr("y", (h/2)) 
.attr("text-anchor", "middle") 
.style("font-size", "16px") 
.text("test2");   

vis.append("text") 
    .attr("y", 425) 
    .attr("x",241.6) 
    .attr("dy", 10) 
    .attr("text-anchor", "middle") 
    .text("test1"); 


    vis.append("text") 
    .attr("y",4) 
    .attr("x",5) 
    .attr("dx", 15) 
    .attr("dy",15) 
    .attr("text-anchor", "middle") 
    .text("test"); 




vis.selectAll("path.path1") 
    .data([0]) 
    .enter().append("svg:path") 
    .attr("d", function(d) { console.log(d);return line.tension(d)(path1); }) 
    .style("stroke","green"); 

Здесь вы можете увидеть работающий пример. jsfiddle.

Answer 1

Надеюсь, это было бы полезно для вас http://bost.ocks.org/mike/chart/. Используя этот подход, вы можете добавить метод domain и использовать его при необходимости для обновления диаграммы.