- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在关注规模交互示例@http://mbostock.github.com/protovis/docs/invert.html我正在尝试绘制 2 条线系列图表。
我的JSON文件如下:
var psSeriesData =
[{"Dates":["1-10","2-10","3-10","4-10","5-10","6-10","7-10","8-10"],"ScoresForA":
[78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],"ScoresForB":
[78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]}]
我打算使用日期绘制 x 轴,并分别使用 ScoresForA 和 ScoresForB 绘制 2 折线图,但在经过多次调整后我很困惑如何做到这一点。
我的代码如下:
var data = pv.range(2).map(function(i) {
return pv.range(0, 10, .1).map(function(x) {
return {x: psSeriesData.Dates, y: psSeriesData.ScoresForA,ScoresForB };
});
});
/* Chart dimensions and scales. */
var w = 400,
h = 200,
x = pv.Scale.linear(0, 9.9).range(0, w),
y = pv.Scale.linear(0, 10).range(0, h),
i = -1;
/* The root panel. */
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.top(5);
/* Y-ticks. */
vis.add(pv.Rule)
.data(pv.range(100))
.visible(function() !(this.index % 2))
.bottom(function(d) Math.round(y(d)) - .5)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("left").add(pv.Label)
.text(function(d) (d * 10).toFixed(0) );
/* X-ticks. */
vis.add(pv.Rule)
.data(x.ticks())
.visible(function(d) d > 0)
.left(function(d) Math.round(x(d)) - .5)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("bottom").add(pv.Label)
.text(function(d) d.toFixed());
/* A panel for each data series. */
var panel = vis.add(pv.Panel)
.data(data);
/* The line. */
var line = panel.add(pv.Line)
.data(function(d) d)
.left(function(d) x(d.x))
.bottom(function(d) y(d.y))
.lineWidth(3);
/* The mouseover dots and label. */
line.add(pv.Dot)
.visible(function() i >= 0)
.data(function(d) [d[i]])
.fillStyle(function() line.strokeStyle())
.strokeStyle("#000")
.size(20)
.lineWidth(1)
.add(pv.Dot)
.left(10)
.bottom(function() this.parent.index * 12 + 10)
.anchor("right").add(pv.Label)
.text(function(d) (d.y * 10).toFixed(5));
/* An invisible bar to capture events (without flickering). */
vis.add(pv.Bar)
.fillStyle("rgba(0,0,0,.001)")
.event("mouseout", function() {
i = -1;
return vis;
})
.event("mousemove", function() {
var mx = x.invert(vis.mouse().x);
i = pv.search(data[0].map(function(d) d.x), mx);
i = i < 0 ? (-i - 2) : i;
return vis;
});
vis.render();
我做错了什么?
nrabinowitz 给出输入后:
var psSeriesData = {
"Dates": ["1/10","2/10","3/10","4/10","5/10","6/10","7/10","8/10"],
"ScoresForA": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],
"ScoresForB": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]
};
// start by iterating over the two keys for your time series data
var data = ["ScoresForA","ScoresForB"].map(function(seriesKey) {
// use pv.range to walk through the indexes of the
// date array (basically the same as a for loop)
return pv.range(0, psSeriesData.Dates.length)
// map these indexes to an array of objects
.map(function(dateIndex) {
// now return an object with the date index
// and series value for that index
return {
x: dateIndex,
y: psSeriesData[seriesKey][dateIndex]
}
});
});
/* Chart dimensions and scales. */
var w = 400,
h = 200,
x = pv.Scale.linear(0, 9.9).range(0, w),
y = pv.Scale.linear(0, 10).range(0, h),
i = -1;
/* The root panel. */
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.top(5);
/* Y-ticks. */
vis.add(pv.Rule)
.data(pv.range(100))
.visible(function() !(this.index % 2))
.bottom(function(d) Math.round(y(d)) - .5)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("left").add(pv.Label)
.text(function(d) (d * 10).toFixed(0) );
/* X-ticks. */
vis.add(pv.Rule)
//.data(function(d) [d[i].Dates])
.data(pv.range(0, psSeriesData.Dates.length).map(function(a) (psSeriesData[a].Dates)))
.visible(function(d) d > 0)
.left(function(d) Math.round(x(d)) - .5)
.strokeStyle(function(d) d ? "#eee" : "#000")
.anchor("bottom").add(pv.Label)
.text(function(d) (d).toFixed());
/* A panel for each data series. */
var panel = vis.add(pv.Panel)
.data(data);
/* The line. */
var line = panel.add(pv.Line)
.data(function(d) d)
.left(function(d) x(d.x))
.bottom(function(d) y(d.y))
.lineWidth(3);
/* The mouseover dots and label. */
line.add(pv.Dot)
.visible(function() i >= 0)
.data(function(d) [d[i]])
.fillStyle(function() line.strokeStyle())
.strokeStyle("#000")
.size(20)
.lineWidth(1)
.add(pv.Dot)
.left(10)
.bottom(function() this.parent.index * 12 + 10)
.anchor("right").add(pv.Label)
.text(function(d) (d.y ).toFixed(5));
/* An invisible bar to capture events (without flickering). */
vis.add(pv.Bar)
.fillStyle("rgba(0,0,0,.001)")
.event("mouseout", function() {
i = -1;
return vis;
})
.event("mousemove", function() {
var mx = x.invert(vis.mouse().x);
i = pv.search(data[0].map(function(d) d.x), mx);
i = i < 0 ? (-i - 2) : i;
return vis;
});
vis.render();
即使我使用了 map 函数和数组引用,日期仍然没有显示为 x 轴。读取“日期”属性似乎存在问题。任何建议
错误:类型错误:无法读取未定义的属性“日期”
最佳答案
在处理这样的可视化时(尤其是在遵循 Protovis 示例时)要做的第一件事是确保您的数据采用您需要的格式。我还没有经历过您的所有代码都在这里,但是您在前面的数据上遇到了一些明显的问题:
为什么你的初始数据在数组中?是否有任何理由包含封闭的直大括号(即 psSeriesData = [{ ... }]
中的外括号)?我在您提供的代码中看不到任何原因,它只会让事情变得困惑(例如 psSeriesData.Dates
未定义 - 您需要引用 psSeriesData[0].日期
)。
我根本不清楚你在初始数据设置代码中做了什么,但我很确定它没有给你你想要的东西 - 它看起来像是盲目的剪切 -从示例中粘贴,即使它不适用。该示例使用 pv.range
生成假数据 - 您不需要这个,您有真实数据,您可以演练它。
从这里开始的最佳方法是了解数据应该是什么样子。在示例中,数据的生成方式如下:
data = pv.range(3).map(function(i) {
return pv.range(0, 10, .1).map(function(x) {
return {x: x, y: i + Math.sin(x) + Math.random() * .5 + 2};
});
});
在控制台中运行它,您将看到生成的数据如下所示:
[
[
{
x: 0.1,
y: 2.34
},
// ...
],
// ...
]
外部数组保存不同的时间序列;每个时间序列都是一个对象数组,例如 {x:0.1, y:2.34}
。如果您的数据与此不同,则它不适用于示例代码。
您的初始数据应该可以正常工作,但您需要将其转换为正确的格式。这里的一个问题是日期列表 - 这些是字符串,而不是数字,除非您将它们转换为 Date
对象,否则您将无法将它们用作数据(这是一个真正的痛苦,如果可能的话,避免使用)或将它们映射到数字 - 后者在这里很容易,因为它们处于常规系列中。 (如果日期间隔不均匀,这一切都会更加复杂,但现在让我们忘记这一点。)您可以仅使用日期的索引作为x
值,然后使用两个系列作为 y
值。
将这些放在一起,您可以像这样格式化数据:
// note - no enclosing array
var psSeriesData = {
"Dates": ["1-10","2-10","3-10","4-10","5-10","6-10","7-10", "8-10"],
"ScoresForA": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],
"ScoresForB": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]
};
// start by iterating over the two keys for your time series data
var data = ["ScoresForA","ScoresForB"].map(function(seriesKey) {
// use pv.range to walk through the indexes of the
// date array (basically the same as a for loop)
return pv.range(0, psSeriesData.Dates.length)
// map these indexes to an array of objects
.map(function(dateIndex) {
// now return an object with the date index
// and series value for that index
return {
x: dateIndex,
y: psSeriesData[seriesKey][dateIndex]
}
});
});
还有很多其他方法可以做到这一点,但要点是你可以得到一个像这样的数组:[[{x:0, y:79.79}, ...] ,...]
。我还没有查看您的其余代码,但现在您的数据格式正确,您应该能够用代码中的真实数据替换示例中的假数据,并使整个过程正常工作预期(尽管您需要更改示例中有关 x
和 y
预期最大值和最小值的任何假设)。
关于javascript - Protovis 比例交互线图示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6751180/
所以基本上我有一个导航栏,我只想有一定的宽度。它有 4 个元素,我希望它正好是这些元素的宽度。这是它在我的工作计算机上的样子。 这正是我想要的样子。导航栏在最后一个元素的末尾完美结束,并且居中。我自己
如何将多个过滤器链接到一个视频中? 基本上 - 我有一个叠加图像(透明 gif),想要将它居中,并为 gif 应用 30% 的不透明度。这就是我所拥有的: ffmpeg -i inputmovie.m
我正在使用此命令对视频进行编码 $transcode = FFMPEG_BINARY.' -loglevel panic -y -i "'.$files['original'].'" -vf scal
我正在使用 Laravel 网站,包括 照片滑动 . 这是我的问题:当我单击照片时,它会以预定义的高度和宽度(在我的情况下为 764X480)弹出。我希望我的照片以原始比例打开,而不是预定义的(因为我
假设我想计算每个组中不同值的比例。例如,使用 mtcars 数据,如何计算 am 的齿轮数量的相对频率(自动/手动)用 dplyr 一次性完成? library(dplyr) data(mtcars)
我用一个非常小的标记散点图数据点(见下面的屏幕截图)。当我使用非常小的标记 ',' 时,图例很难阅读(示例代码取自 here )。 (Python 3,Jupyter 实验室) 如何增加图例中标记的大
我有这个数据框: o d r kz p 1 3 1 5 NaN 1 3 2 0 NaN 1 10 1 7 NaN 1 10 3 1
我对 R 很陌生,所以如果我的问题中有不清楚的地方,请耐心等待。 我有一个 data.frame “蛋白质”有5列,即; 1.protein_name, 2.protein_FC, 3.protein
我有一个带有 webgl 的 Canvas 。我初始化 webgl,创建一个片段和一个顶点着色器、两个覆盖整体的三 Angular 形和一个纹理。 const vertexShaderSource =
我想找到包括旋转,比例和位置的匹配模板。但是cvMatchTemplate没有提供这些详细信息,它仅检测位置。 我看过使用棋盘的例子。但是我想用自定义图像实现相同的示例。 感谢帮助。 问候 最佳答案
我正在尝试制作像欧洲体育应用程序中那样的侧边栏菜单!当菜单从左侧滑动时,sourceviewcontroller 向左滑动并变小。 var percentWidthOfContainer = cont
https://stackblitz.com/edit/js-meta-viewport 在 Chrome 调试器中,当我点击“可以缩放”但无法在移动设备 (Nexus 5 (Chrome 70))
针对一台设备进行优化后, ImageView 会按照布局中定义的正确比例显示。然而,如何才能更进一步,使各种 ImageView 在不同设备上缩放? android:layout_width="fil
我正在尝试创建一个具有两个 View 的 View Controller ,其中一个实际上是自定义 TableView ,如下所示: 是否可以添加某种比例约束,以便在所有设备和所有方向上,上 View
我正在使用 PhoneGap 为 Android 开发。下面你可以看到我的代码,我不能做的是在用户更改比例后将 WebView 比例重置为 1。 The reset code should be im
我有一个涉及大量图像的元素。 问题是每个图像都有不同的分辨率(高度/宽度)。它从 200x600 之类的小图像变成了 3000x5000 大声笑。 我正在尝试找到一种方法将所有图像的大小减小到 (MA
我想在运行时设置视口(viewport)比例 - 移动浏览器是否应该在设置后立即应用更改?这就是我正在尝试的: var scale = 2.0; var viewport = document.get
我在 paperjs 中有一个圆形和一个矩形对象。现在我想制作动画。在该动画中,圆圈上升并且矩形必须在圆圈之后(在圆圈底部)增长。我在这里有一个例子(不是我想要的那样工作) example 代码: v
对不起,我不能给标题带来完美的含义。您可以在 http://dainielhhong.com/page1.html 测试代码 无论屏幕大小如何,我都想使 crack 和 box fit。 它适合我的显
我是 D3 v3 的新手,正在学习一些有关基本线性和序数尺度的教程。我正在修改教程中的一段代码。我想让颜色根据窗口的大小显示和缩放。如果有更多数据,那么它应该再次均匀分布以容纳所有数据。 var da
我是一名优秀的程序员,十分优秀!