mithril.js 和 d3.js 的简单条形图

Question

我对 javascript 和 mithril.js 非常陌生。我正在尝试使用 mithril.js 和 d3.js 创建一个非常简单的条形图。但是，我什至连轴都到位了。

首先，我创建了一个 mithril “svg” 组件，并附加了一个 mithril “g” 组件，如下所示：

var g = m(gView, {transpose:"translate(10, 10)"})
var svg = m(SVGView, {width: 100, height:100}, g)

其中gView和SVGView如下：

var gView = {
view: function(vnode) {
return m("g", vnode.attrs, [vnode.children]);
    }
}

var SVGView = {
    view: function(vnode) {
    return m("svg", vnode.attrs, [vnode.children]);
    }
}

现在我创建了一个简单的坐标轴刻度和坐标轴函数如下：

var xScale = d3.scaleLinear()
        .domain([0, 10])
        .range([0, 40]);

var xAxis = d3.axisBottom(xScale)

如何将我的 xAxis 添加到我的秘银组件 svg？

我看到很多例子，他们只使用 .call(xAxis)，但这只适用于 d3.select()。我不想使用也不能使用 d3.select()，因为我必须使用秘银。

如果我的 question/code 很愚蠢或者我的方法完全错误，请原谅。我搜索了一个使用秘银的简单条形图构建，但我找不到任何东西。因此，感谢任何帮助，甚至欢迎重定向到我可以阅读有关在秘银中绘制图形的来源。谢谢！

Answer 1

据我所知，除了让 d3 运行本身成为 dom 的子树之外，没有什么好方法可以将 d3 完美地融入 mithriljs 应用程序。

我根据你上面的代码创建了一个简单的例子，这个 mithril js 例子来自文档：bootstrap-fullcalendar-example

请注意 BarChart 组件 总是告诉 mithril 它只在其 view 内部渲染一个 div 因此在它的第一个之后即使 d3 正在操纵 div 下面的 dom，它也永远不会被重新绘制。这是关键，因为你不想用 d3 画东西，然后用秘银画在它上面或相反。

为了操作条形图，您必须在 App 中使用 d3.select，使用 barChartEl 中保存的 dom 元素。我为此创建了一个愚蠢的示例，它只将条形图向右推一次，然后您可以使用另一个按钮将其重置。对不起，我对 d3 了解不够，但你明白了。还要注意 barChartEl 是 div 而不是 svg 节点，但我仍然可以 select 到 g 或者你可以直接 select svg 那里。

编写此代码是为了使用 d3 v5 和 mithril 2.0.4.

// Assumes that d3 available.


function BarChart() {
  return {
    oncreate: function (vnode) {
      var xScale = d3.scaleLinear()
        .domain([0, 10])
        .range([0, 40]);

      var xAxis = d3.axisBottom(xScale)
      d3.select(vnode.dom).append("svg")
        .attr("width", 100)
        .attr("height", 100)
        .append("g")
        .attr("transform", "translate(10,10)")
        .call(xAxis);
    },
    view: function (vnode) {
      return m('div');
    }
  }
}

function App() {
  
  var barChartEl = null;
  return {
    view: function (vnode) {
      return m('div', [
        m('button[type=button]', {
          onclick: function () { 
           d3.select(barChartEl).select("g").attr('transform', "translate(50,10)");
          }
        }, 'BarChart Right'),
        m('button[type=button]', {
          onclick: function () { 
           d3.select(barChartEl).select("g").attr('transform', "translate(10,10)");
          }
        }, 'BarChart Reset'),
        m(BarChart, {
        oncreate: function (vnode) { 
          // Save off bar chart element in case we need to reference it
          // with d3.select. 
          barChartEl = vnode.dom; 
        }
      })]);
    }
  }
}

m.mount(document.body, App);

此示例代码还使用此处文档中所示的闭包样式组件来存储状态：closure-component-state.

mithril.js 和 d3.js 的简单条形图

simple bar plot with mithril.js and d3.js

javascript

svg

bar-chart

d3.js

mithril.js