Question

我希望d3的每条曲线都根据其域和范围从顶部开始。

我使用起点[x，y] = [1,8.5]或曲线的任何点，但我不希望8.5到10之间的顶部空间。它应该从8.5或Y坐标的任何值开始。我知道它根据范围[0,10]工作。

每条曲线都适用于

每条曲线或路径的Y坐标将根据单词增加。
每条曲线或路径的x坐标将根据单词的长度增加。

不想在更改域[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方法，并在必要时使用它来更新图表。

如何动态更改d3图的域和范围？

1 个答案: