带mithril.js和d3.js的简单条形图 [英] simple bar plot with mithril.js and 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 gV​​iew = {查看:function(vnode){返回m("g"，vnode.attrs，[vnode.children])；}}var SVGView = {查看:function(vnode){返回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()，因为我必须与秘银一起工作.

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

解决方案

据我所知，没有一种很好的方法可以让d3完全适合mithriljs应用程序，而不仅仅是让d3自己运行dom的子树./p>

我根据上面的代码创建了一个简单的示例，该文档中的秘银js示例位于以下位置: bootstrap-fullcalendar-example

请注意， BarChart 组件始终告诉秘银，它仅在其 view 内渲染 div 因此，即使d3正在操纵该 div 下的dom，它也不会再被重画.这是关键，因为您不想使用d3绘制某些东西，然后在其上或其他相反的地方绘制秘银.

为了操纵条形图，您将必须使用在 barChartEl 中保存的dom元素在 App 内使用 d3.select .代码>.我创建了一个愚蠢的示例，仅将条形图向右推一次，然后可以使用另一个按钮将其重置.我对d3不太了解，对不起，但是您明白了.还要注意， barChartEl 是 div ，而不是 svg 节点，但是我仍然可以选择 g 或您可以直接在其中选择 svg .

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

 //假定d3可用.函数BarChart(){返回 {oncreate:函数(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);}，查看:function(vnode){返回m('div');}}}函数App(){var barChartEl = null;返回 {查看:function(vnode){返回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重置")，m(BarChart，{oncreate:函数(vnode){//保存条形图元素，以防我们需要引用它//使用d3.select.barChartEl = vnode.dom;}})]);}}}m.mount(document.body，App); 

此示例代码还使用此处文档中所示的闭包样式组件来存储状态:关闭组件状态.

I am very very new to javascript and mithril.js. I am trying to create a very simple bar plot using mithril.js and d3.js. But, I am not having any luck even getting the axis in place.

Firstly, I created a mithril "svg" component and appended a mithril "g" compent as follows:

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

where gView and SVGView are as follows:

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

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

Now I created a simple axis scale and an axis function as follows:

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

var xAxis = d3.axisBottom(xScale)

How do I add my xAxis to my mithril component svg?

I saw many many examples where they just use .call(xAxis) but this works only with a d3.select(). I don't want to use and cannot use a d3.select() as I have to work with mithril.

If my question/code is stupid or if my approach is totally wrong please excuse me. I searched for a simple bar plot build using mithril and I couldn't find anything. So, any help is appreciated or even a redirection to a source where I can read about plotting graphs in mithril is apprecated. Thanks!

解决方案

As far as I know there is not a great way to perfectly fit d3 into a mithriljs app without just letting d3 run a subtree of the dom by itself.

I created a simple example based off your code above and this mithril js example from the documentation at: bootstrap-fullcalendar-example

Note that the BarChart component always tells mithril that it is only rendering a div inside of its view therefore after its first draw it will never be redrawn again even though d3 is manipulating the dom below that div. This is critical because you don't want to draw something with d3 and then have mithril draw over it or the opposite.

In order to manipulate the bar chart you will have to use d3.select inside the App using the dom element that was saved off in barChartEl. I created a silly example of this that just pushes the bar chart to the right once and then you can reset it with the other button. I don't know enough about d3 sorry but you get the idea. Also note that barChartEl is the div and not the svg node but I can still select down to the g or you could directly select the svg there.

This code was written to use d3 v5 and 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);

Also this example code uses the closure style components as seen in the documentation here in order to store state: closure-component-state.

这篇关于带mithril.js和d3.js的简单条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！