- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个 D3 图表。目前填充图表的数据位于同一 html 页面上。今后该图表的数据将由外部 JSON 文件填充。 JSON 由输入到表单中的值创建。当我尝试用 d3.json 函数替换“硬编码”数据时,我完全破坏了图表,有人能建议我哪里出错了吗?当前文件:
图表.html
<script>
var data = [
{key: "ING_SW_CB", value: 10 },
{key: "SB_SW_CB", value: 9 },
{key: "NG3_SW_CB", value: 8 },
{key: "Mould_Close", value: 12 },
{key: "Leak_Test", value: 10 },
{key: "ML_Load", value: 7 },
{key: "Pre_Heat", value: 12 },
{key: "Dispense", value: 10 },
{key: "A310", value: 10 },
{key: "Gelation", value: 11 },
{key: "Platen", value: 9 },
{key: "Mainline_Unload", value: 13},
{key: "De_mould", value: 10},
{key: "Clean_Up", value: 11},
{key: "Soda_Blast", value: 12},
{key: "Miscellaneous", value: 12}
];
var w = 800;
var h = 450;
var margin = {
top: 58,
bottom: 100,
left: 80,
right: 40
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(data.map(function(entry){
return entry.key;
}))
.rangeBands([0, width],.2);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d){
return d.value;
})])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var yGridLines = d3.svg.axis()
.scale(y)
.tickSize(-width, 0, 0)
.tickFormat("")
.orient("left");
var svg = d3.select("body").append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h);
var chart = svg.append("g")
.classed("display", true)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function plot(params){
this.append("g")
.call(yGridLines)
.classed("gridline", true)
.attr("transform", "translate(0,0)")
this.selectAll(".bar")
.data(params.data)
.enter()
.append("rect")
.classed("bar", true)
.attr("x", function (d,i){
return x(d.key);
})
.attr("y", function(d,i){
return y(d.value);
})
.attr("height", function(d,i){
return height - y(d.value);
})
.attr("width", function(d){
return x.rangeBand();
});
this.selectAll(".bar-label")
.data(params.data)
.enter()
.append("text")
.classed("bar-label", true)
.attr("x", function(d,i){
return x(d.key) + (x.rangeBand()/2)
})
.attr("dx", 0)
.attr("y", function(d,i){
return y(d.value);
})
.attr("dy", -6)
.text(function(d){
return d.value;
})
this.append("g")
.classed("x axis", true)
.attr("transform", "translate(" + 0 + "," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", -8)
.attr("dy" ,8)
.attr("transform", "translate(0,0) rotate(-45)");
this.append("g")
.classed("y axis", true)
.attr("transform", "translate(0,0)")
.call(yAxis);
this.select(".y.axis")
.append("text")
.attr("x", 0)
.attr("y", 0)
.style("text-anchor", "middle")
.attr("transform", "translate(-50," + height/2 + ") rotate(-90)")
.text("Downtime [Hrs]");
this.select(".x.axis")
.append("text")
.attr("x", 0)
.attr("y", 0)
.style("text-anchor", "middle")
.attr("transform", "translate(" + width/2 + ",80)")
.text("[Stations]");
// title
this.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Over Mould");
}
plot.call(chart, {data: data});
</script>
我希望用这个外部 JSON 文件替换“data”var:
[
[
{
"key": "ING_SW_CB",
"value": "5"
},
{
"key": "SB_SW_CB",
"value": "5"
},
{
"key": "NG3_SW_CB",
"value": "5"
},
{
"key": "Mould_Close",
"value": "5"
},
{
"key": "Leak_Test",
"value": "5"
},
{
"key": "ML_Load",
"value": "5"
},
{
"key": "Pre_Heat",
"value": "5"
},
{
"key": "Dispense",
"value": "5"
},
{
"key": "A310",
"value": "5"
},
{
"key": "Gelation",
"value": "5"
},
{
"key": "Platen",
"value": "5"
},
{
"key": "Mainline_Unload",
"value": "5"
},
{
"key": "De_mould",
"value": "5"
},
{
"key": "Clean_Up",
"value": "5"
},
{
"key": "Soda_Blast",
"value": "5"
},
{
"key": "Miscellaneous",
"value": "5"
}
]
]
非常感谢您的宝贵时间,我已在最后期限内启动并运行此项目!
最佳答案
关于javascript - 使用外部 JSON 文件填充 D3 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29499374/
如何指示 webpack 排除所有 d3 模块? // does not work externals: { "d3-*": "d3" } 所以如果应用导入了d3-submod
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: What does “outer =>” really mean? 我在哪里可以找到有关信息 trait After
这是一个简单的循环,我正在尝试对性能进行基准测试。 var extremeLoop=function(n){ var time=new Date() var t=0; for(
问题+概述 下面是两个片段,其中包含最初隐藏的 div,然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样
我有一个 HTML 页面和一个单独的 .js 文件,该文件包含在带有 的页面中标签。 这是我的 .js 文件: element = document.getElementById("test");
我在 linux 静态库项目中有 3 个文件,我想在两个类方法实现文件中使用的静态字段存在链接问题。我有 class1.h、class1main.cpp 和 class1utils.cpp。 clas
我正在尝试将颜色背景更改为默认背景颜色,当我点击输入框外 我尝试使用“null”或“none”但没有用? window.addEventListener('click', outsideClick);
我正在编写一个应用程序,要求用户在手机上选择各种类型的文件。我使用此代码启动文件选择器 Intent : Intent intent = new Intent(Intent.ACTION_GET_C
在 android 中,不可移动(内部)的外部存储和内部存储有什么区别?我不确定在哪里保存我的数据。我只需要保存一个人可以随时提取的游戏统计数据 谢谢 最佳答案 在许多较新的设备中,将不再有物理区别,
在 C++ 中,假设我们有这个头文件: myglobals.h #ifndef my_globals_h #define my_globals_h int monthsInYear = 12; #en
我正在尝试使用 externs 在 C++ 中连接到 Ada。这两种实现有什么区别? 实现A namespace Ada { extern "C" { int getN
这个问题在这里已经有了答案: Get selected element's outer HTML (30 个答案) 关闭 2 年前。 想象一下我们有这样的东西: Hello World 如果我们这样
假设我在模块的顶部有这个: Public Declare Function getCustomerDetails Lib "CustomerFunctions" () As Long 如果我从 VB6
我目前正在使用这段代码: var wordRandomizer = { run: function (targetElem) { var markup = this.creat
我们正在使用 SVN 试水,并以 Beanstalk 作为主机。我们的设置如下所示: 存储库:模块 模块一 模块二 模块 3 存储库:网站1 自定义网站代码 svn:对模块 1 的外部引用 svn:对
有没有办法在负载均衡器中设置自动外部 IP 分配给像谷歌这样的服务? 我在裸机上运行 Kubernetes。 谢谢 最佳答案 使用 nodePort 类型的服务,它会将您的服务绑定(bind)到所有节
是否有可能在 Controller 之外使用 generateUrl() 方法? 我尝试在带有 $this->get('router') 的自定义存储库类中使用它,但它没有用。 更新 我在这里找到了一
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止,我已经为 React 和其他小库实现了这一目标。 如果我只是移动 '@angular/compil
我想创建一个自动应用其他插件的插件(外部插件)。这要求在我称为“应用插件”之前为插件设置构建脚本依赖项。但是似乎我无法在插件中添加buildscript依赖项,或者得到了: 您不能更改处于未解析状态的
我是R包的创建者EnvStats . 有一个我经常使用的函数,叫做 stripChart .我刚开始学习ggplot2 ,并在过去几天里仔细研究了 Hadley 的书、Winston 的书、Stack
我是一名优秀的程序员,十分优秀!