带有 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()，因为我必须使用秘银。

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

Answer 1

据我所知，如果不让 d3 自己运行 dom 的子树，没有一种很好的方法可以将 d3 完美地融入 mithriljs 应用程序。

我根据您上面的代码和文档中的这个秘银 js 示例创建了一个简单的示例：bootstrap-fullcalendar-example

请注意，BarChart 组件总是告诉 mithril，它只在其 view 内渲染 div，因此在第一次绘制后，即使 d3操作 div 下面的 dom。这是关键，因为您不想用 d3 绘制一些东西，然后用秘银绘制它或相反。

为了操作条形图，您必须在App 中使用d3.select，并使用保存在barChartEl 中的dom 元素。我为此创建了一个愚蠢的示例，只需将条形图向右推一次，然后您可以使用另一个按钮将其重置。抱歉，我对 d3 了解不多，但你明白了。另请注意，barChartEl 是 div 而不是 svg 节点，但我仍然可以向下选择 g，或者您可以直接在那里选择 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。