时间戳

首页 > 解决方案 > 带有 mithril.js 和 d3.js 的简单条形图

javascript - 带有 mithril.js 和 d3.js 的简单条形图

问题描述

我对 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(). 我不想使用也不能使用 ad3.select()因为我必须使用秘银。

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

标签： javascriptd3.jssvgbar-chartmithril.js

解决方案

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

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

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

为了操作条形图，您必须d3.select在Appusing 保存在barChartEl. 我为此创建了一个愚蠢的示例，只需将条形图向右推一次，然后您可以使用另一个按钮将其重置。抱歉，我对 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。

推荐阅读