Question

我的解决方案很不错我正在创建一个多图表，用户动态添加graps 这就是为什么我必须使用window方法将变量名称赋给比例一切似乎都很棒，看起来也不错，但是我没有看到我应该在图上的值我的初始值来自ajax

例如start_range和end_range是130,0 第二个是290-160 基本上从上到下增加130（每个图形的高度）和30 px我放在它们之间第一个图表的域名为1415,1500，第二个图表的域名为-20,20

现在的问题 - 我试图在第一个中设置阈值线1437，在第二个中设置0

 g.append('line')
                .attr('x1', 0) //starts at first x
                .attr('y1', window['scale_vwl'](0)) //starts where I tell him in the function argument
                .attr('x2',width)  //ends at last x (fortunately the x are the same for all arrays (data1,data2 etc)
                .attr('y2', window['scale_vwl'](0))
                .attr('class', 'mediumline');

在图表上，它位于第一种情况下的1457附近，第二种情况下的10位（应该是0）

我想也许我混淆了一些边缘但是它与它的位置和我想要的位置的差异在第一种情况下是20，在第二种情况下是10，所以我不能强迫像-20这样的东西

我尝试将所有边距设为0，仍然给我错误的定位线怎么会在那里？我试过alert(window['scale_'+param_name](1437))，它给了我95

我读过刻度变换的方式，所以我也做了我的初始间隔为1415-1500，差异= 85 我的图表间隔0-130，差异130

factor = 85 / 130 = 0.65

但1437 / 0.65 = 2210,7 我觉得完全迷失了

第二个问题是 - 如果我根据我的数据创建线条和圆圈，为什么它们在图形中处于不同的位置？（圆圈在上面）哪个是对的？

我拼命搜索，什么都没有出现如果可能，请给我一个提示

这是一个工作小提琴 https://jsfiddle.net/zk5j5fno/ 谢谢

Answer 1

在它自己的svg中构建每个绘图可能会更容易。你现在拥有的是too many magic numbers综合症患者。一旦开始进入像素位置，您需要重新考虑您的方法。例如：

 build_yaxis_path('vwl', data2, 290, 160, -20, 20); //<- why 290, why 160?

那就是说，这条线正在抛弃你的刻度（实际上刻度很好，轴放置不正确）：

//append axis
g.append("g")
  .attr("class", "y axis " + param_name)
  .style("fill", "steelblue") //here change color
  .attr('transform', 'translate(0, 30)') //<-- 30?

如果你摆脱那条线，比例和轴匹配。当然，这会导致你必须在其他地方调整事情......

这是一个example，我已经解决了一些问题。

缩放不在d3.js中给出预期值

1 个答案: