javascript - 如何仅在 x 轴线上进行绘图？ (d3.js)

Question

我刚刚开始试用 d3 库。

我正在尝试创建一个交互式折线图，人们可以在其中绘制自己的点。你可以在这里找到它:http://jsfiddle.net/6FjJ2/

我的问题是:我怎样才能确保绘图只能在 x 轴的线上完成？ 如果您查看我的示例，您会发现它是可行的, 但有很多作弊行为。查看 ok 变量...实现此目标的正确方法是什么？我不知道如何通过...实现这一点，所以我得到了很多单独的。

   var data = [2, 3, 4, 3, 4, 5],
   w      = 1000,
   h      = 300,

   monthsData = [],
   months     = 18;

   for(i = 0; i < months; i++) {
     monthsData.push(i);
   }

   var max = d3.max(monthsData),
   x = d3.scale.linear().domain([0, monthsData.length]).range([0, w]),
   y = d3.scale.linear().domain([0, max]).range([h, 0]),

   pointpos = [];

   lvl  = [0, 10],
   lvly = d3.scale.linear().domain([0, d3.max(lvl)]).range([h, 0]);

   svg = d3.select(".chart")
           .attr("width", w)
           .attr("height", h);

   svg.selectAll('path.line')
   // Return "data" array which will form the path coordinates
      .data([data])
   // Add path
      .enter().append("svg:path")
      .attr("d", d3.svg.line()
                       .x(function(d, i) { return x(i); })
                       .y(y));

   // Y-axis ticks
   ticks = svg.selectAll(".ticky")
   // Change number of ticks for more gridlines!
              .data(lvly.ticks(10))
                        .enter().append("svg:g")
                        .attr("transform", function(d) { return "translate(0, " +  (lvly(d)) + ")"; })
                        .attr("class", "ticky");

   ticks.append("svg:line")
        .attr("y1", 0)
        .attr("y2", 0)
        .attr("x1", 0)
        .attr("x2", w);

   ticks.append("svg:text")
        .text( function(d) { return d; })
        .attr("text-anchor","end")
        .attr("dy", 2)
        .attr("dx", -4);

   // X-axis ticks
   ticks = svg.selectAll(".tickx")
              .data(x.ticks(monthsData.length))
                                      .enter().append("svg:g")
                                      .attr("transform", function(d, i) { return "translate(" +  (x(i)) + ", 0)"; })
                                      .attr("class", "tickx");

   ticks.append("svg:line")
        .attr("y1", h)
        .attr("y2", 0)
        .attr("x1", 0)
        .attr("x2", 0);

   ticks.append("svg:text")
        .text( function(d, i) { return i; })
        .attr("y", h)
        .attr("dy", 15)
        .attr("dx", -2);

   //   var d = $(".tickx:first line").css({"stroke-width" : "2", opacity : "1"});

   var line;
   var ok = -55;

   svg.on("mousedown", mouseDown)
      .on("mouseup", mouseUp);

   function mouseDown() {
     var m = d3.mouse(this);
     line = svg.append("line")
               .data(monthsData)
     /* .attr("x1", m[0]) */
               .attr("x1", function(d, i) { pointpos.push(m[0]); ok += 55; return ok;})
               .attr("y1", m[1])
               .attr("x2", function(d, i) { return ok + 56; })
     /* .attr("x2", function(d, i) {return 300; }) */
               .attr("y2", m[1]);

     svg.on("mousemove", mouseMove);

     var m = d3.mouse(this);
     var point = svg.append("circle")
                    .attr("cx", function(d, i) { return ok; })
                    .attr("cy", function(d, i) { return m[1]; })
                    .attr("r", 8);

     lvl.push(100);
   }

   function mouseMove() {
     var m = d3.mouse(this);
     line.attr("y2", m[1]);
     /* .attr("y1", m[0]); */
   }

   function mouseUp() {
     // Change null to mousemove for a graph kinda draw mode
     svg.on("mousemove", mouseMove);
   }

请原谅我的错误代码!

提前致谢。

Answer 1

看起来你需要:

1. > histogram layout用于合并您的积分。
2. > ordinal scales用于根据 bin 限制它们的 x 轴 位置

作为旁注，您可以使用 d3.svg.axis为您绘制轴。