问题标签 [marimekko-chart]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1884 浏览

d3.js - D3.js 如何生成可变宽度堆叠图表(Marimekko 图表)

我想生成一个堆积条形图(类似于http://bl.ocks.org/mbostock/1134768),其中每个条的总高度相同,宽度不同。这种图表也称为 Marimekko 图表。

到目前为止,我尝试根据 csv 文件中的值改变宽度的尝试失败了。任何建议,将不胜感激。

0 投票
1 回答
688 浏览

javascript - d3.js 如何将文本添加到 Marimekko 图表

我正在尝试将文本添加到工作中的 Marimekko 图表。我知道向矩形添加文本需要矩形和文本需要在一个组中。但是我用作基础的代码已经使用了一个组。这是我的主要问题,但我也想让 x 轴显示月份而不是 % 值。对于 marimekko 图表来说,这个任务是不可能的吗?

0 投票
1 回答
895 浏览

javascript - D3.js 如何旋转 Marimekko 图表

我有一个Marimekko 图表,其中条形垂直对齐(条形数量有限)。

然而,最终的图表将有如此多的条形,因此最好使用支持更多值的水平布局。我试图通过反转 x 和 y 值来修改图表,但结果无法正常工作。我希望数据中的第一个月出现在图表的顶部。带有竖线(无数据)的工作代码在下方和此处

在此处输入图像描述

0 投票
0 回答
564 浏览

javascript - 在 Highcharts marimekko 图表中重新堆叠累积列

我已经使用 Highcharts 设置了一个基本的可变宽度柱形图(又名 Marimekko),但是一旦删除或隐藏了一个系列,我就无法让它正确地重新堆叠列以消除数据间隙。

JSFIDDLE DEMO <-- 我已经在此处设置了该问题的演示。

您会注意到单击图例项会从图表中删除系列,但它也会删除数组中的所有以下数据点(即单击系列C会删除系列CDE,而它应该重绘为ABDE) . 由于 y 轴数据旨在显示所有系列的累积总和,因此这些应该重新排列为相邻列,没有间隙。我怎样才能让它正确渲染?

这篇文章使用了类似的演示代码并试图解决同样的问题,但是答案有点难以捉摸,我无法让它工作。

提前致谢!

});

0 投票
1 回答
63 浏览

javascript - Marimekko 图表单元格标题未更新

我正在为 Titanic 数据集https://www.kaggle.com/c/titanic/data进行可视化,经过一番搜索,我发现 marimekko 图表是该数据集的最佳可视化。

我查看了http://www.jasondavies.com/mekko/并开始稍微调整代码以适应我的需要。我的问题是单元格标题(在鼠标悬停在单元格后出现的标题)不会更新值。第一次调用函数 正确绘制了标题,然后当我尝试使用转换函数更改单元格值时,图表正确动画但单元格标题中的值没有改变,当我悬停时它们仍然具有旧值在他们。

转换函数的最后一行是:

这似乎在第一次绘制图表时起作用,但是当单元格数据更改时它不会更新标题。

任何想法如何解决这一问题 ?

如果您想看看我所做的更改,请查看工作示例 http://codepen.io/hshihab/pen/PqWjmo

我只是对 Jason 的原始代码进行了一些小改动以表明我的观点。

0 投票
1 回答
194 浏览

javascript - Highcharts 'bindAxis' 仅适用于一个图表

我正在尝试在我的应用程序中集成 MariMekko / Market 类型的图表。我在这里找到了一个有趣的实现:

http://jsfiddle.net/h2np93k1/39/

此代码构造一个树形图并向其添加轴。这是由这个片段完成的:

但是,如果我理解正确,这将导致我所有的treemap图表都有轴。我不想要这个,我只想为我的 marimekko 地图保留轴。

实现这一目标的最佳方法是什么?例如,有没有一种简单的方法来扩展图表类型?

0 投票
0 回答
75 浏览

r - R Highcharter 马赛克 / marimekko 图表

我尝试按照以下示例在 R Highcharter 中创建一个 marimekko 图表:

http://jsfiddle.net/highcharts/h2np93k1/

我似乎无法让树图的sortIndex工作,我的代码如下:

有人有什么想法吗?

0 投票
1 回答
177 浏览

d3.js - 试图理解 marimekko 图的代码示例

我正在浏览 Mike Bostock 的 marimekko 图代码,如下所示: https ://bl.ocks.org/mbostock/1005090

我有几个关于我不理解的代码段的问题:

这一个,我收集与计算条形图的翻译有关,但我真的不明白它在计算或做什么。v 和 p 是什么?我知道 d 和 i 是什么作为函数参数,但还没有见过 v 和 p。

我将如何将 x 轴刻度标签更改为不是百分比,而是作为段总和的绝对值?
我想我需要更新 x 函数以将值的域更改为等于细分市场内市场的总和,但每个市场都不同,所以我可以像在示例中看到的那样对数据进行最大值.

0 投票
1 回答
131 浏览

r - 堆叠的 geom_bar():在可变宽度的条之间保持相等的间隙

我的样本数据和情节:

在此处输入图像描述

如我所愿,条形的宽度与组的大小成正比,每个子组的高度(低/高)与该子组的大小成正比。但是改变width会导致改变条之间的间隙 - 我怎样才能避免这种情况并保持条之间的恒定距离?

0 投票
0 回答
34 浏览

powerbi - 如何在 Power BI Mekko 图表中按升序对每单位的 y 轴成本进行排序?

这是 Mekko 图表。我必须按“索引”升序或“单位成本”升序对其进行排序。两者都会。现在没有排序,我得到图表 A,但目的是得到图表 B。我正在使用 Power BI 工具。

非常感谢有关如何制作此图表或如何进行排序的任何帮助。

在此处输入图像描述