Question

我正在学习Vue.js。我想让Vue.js实例将svg元素属性绑定到d3.js比例。我想以某种方式做到这一点，以便以后再更改比例范围或域时（例如，在另一种情况下，最大域值需要更高），旧元素也将适应。例如，如果两个可视化共享相同的颜色图例，因此我想使用相同的比例，则这将很有用。

<div id="example">
  <svg width="100" height="100">
    <circle r="50" cx="50" cy="50" :fill="color"></circle>
  </svg>
</div>
<script>
  let colorScale = d3.scaleLinear().range(['#FFFFFF', '#0000FF']);

  new Vue({
    el: '#example',
    computed: {
      color: function() {
        return colorScale(0.5);
      }
     }
  });

  colorScale.range(['#FFFFFF', '#FF0000']);
</script>

在此示例中，我想看到一个淡红色的圆圈。有没有办法做到这一点？也许有一种方法可以刷新计算变量或将比例尺保留在Vue实例数据对象中。

Answer 1

您可以插入其他数据变量并在外部进行更改：

const v = new Vue({
  el: '#example',
  data() {
    return {
      colorScale: d3.scaleLinear().range(['#FFFFFF', '#0000FF'])
    }
  },
  computed: {
    color: function() {
      return this.colorScale(0.5);
    }
  }
});

setTimeout(() => {
  v.colorScale = d3.scaleLinear().range(['#FFFFFF', '#FF0000'])
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="example">
    <svg width="100" height="100">
        <circle r="50" cx="50" cy="50" :fill="color"></circle>
    </svg>
</div>

我可以使用vue.js跟踪d3.js缩放比例的变化

1 个答案: