Question

我在Meteor中使用D3来创建一个简单的矩形，其测量值将根据全局助手中运行的计算而改变。我在this Meteorpad中复制了一个更简单的代码版本。

当用户点击其中一个按钮时，activeValue更改并且矩形的宽度应该更改，而是创建一个新的矩形，每次使用新activeValue的宽度用户单击一个按钮。现有形状不会改变。

我添加了var data = Template.currentData()，discussed here。但是，我不确定我是否正确使用它。

我错过了D3特有的东西吗？

谢谢。

EDIT 我已经能够在MeteorPad和我的工作应用程序中使用@ nchenbang的代码，现在可以看到价值的变化。但是，添加更多Results时仍然存在问题。我修改了the MeteorPad来说明。当我添加第二个Result然后更改该值时，它只控制第一个Result，而不是新的。{/ p>

我认为它与行d3.select("rect")有关，但我无法弄清楚如何改变它。如何确保每个Result单独运行代码？

Answer 1

更新的答案

在通过Meteorpad中的代码进行研究后（仍然不确定你要在整体上做什么），我意识到你错误地使用了大火数据上下文。对于模板的js，您可以使用模板事件和帮助中的this.data或Template.Result.onRendered中的this来访问模板的数据。对于模板的html，您可以使用名称直接访问数据，例如调用{{_id}}将为您提供当前模板的_id。

请注意，我在Template.currentData()中使用self.autorun来访问当前模板的数据上下文而不是self.data，因为Template.currentData()是被动的，这意味着只要选项的值对于当前模板的更改，self.autorun中D3的变换可以重新运行并更改矩形的宽度。

以下是我对结果模板的修改

client / app.js（仅修改结果模板）

Template.Result.events({
  'click #result1': function(e) {
    (e).preventDefault();

    Results.update({_id:this._id},{$set:{option: this.rate1}});
  },
  'click #result2': function(e) {
    (e).preventDefault();

    Results.update({_id:this._id},{$set:{option: this.rate2}});
  }  
});

Template.Result.helpers({
  getResult: function(rate) {
    return getResult(rate);
  }
});

Template.Result.onRendered (function () {
  const self = this;
  let barContainer = d3.select("#bar" + self.data._id)
    .append("svg")
    .attr("width", 200)
    .attr("height", 50),
     bar = barContainer.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("height", 50)
    .attr("width", getResult(self.data.option || 0));

  self.autorun(() => {
    let option = Template.currentData().option;

    if(option !== self.data.option)
    {
      barContainer.select("rect")
      .transition()
      .duration(1000)
      .attr("height", 50)
      .attr("width", getResult(option));
    };
  });
});

let getResult = (rate) => {
    var multiplier = 10;

    return rate * multiplier;
};

main.html（仅修改结果模板）

<template name="Result">
  <div class="result">
    <div class="wrapper">
      <div class="wrapper grid">
        <div class="grid-button">
          <button type="button" class="button" id="result1">
            {{getResult rate1}}
          </button>
        </div>
        <div class="grid-button">
          <button type="button" class="button" id="result2">
            {{getResult rate2}}
          </button>
        </div>
      </div>
      <div class="grid wrapper">
        <div>          
          Click button to change the active value.  This should change the width of the rectangle.
        </div>
        <div>
          Active Value: {{getResult option}}
        </div>
      </div>
    </div>
    <div class="box">
      <div id="bar{{_id}}">
      </div>
    </div>
  </div>
</template>

Meteor中的D3正在使用更新的数据创建新形状，而不是更新现有形状

1 个答案: