我用 d3.js 创建了一些直方图.
我设法更改了 rect 的填充颜色取决于 brush 的位置.
但我想更改 rect 中的颜色.例如，如果 brush start在 rect 的中间我想要我的 rect有两种颜色。
目前这就是我所拥有的:
这就是我想要的:
我见过一些例子，比如 Here .我是 d3 的新手，我尝试理解代码。
我看到他们使用 clip-path这肯定会在没有画笔时隐藏背景栏，并在有画笔时显示背景栏，具体取决于画笔的范围。
这是一个JS Bin
我已经详细阅读了 link 中提供的代码.我发现他们不创建 <rect>制作图表的元素但是 barPath喜欢跟随:
function barPath(groups) {
var path = [],
i = -1,
n = groups.length,
d;
while (++i < n) {
d = groups[i];
path.push("M", x(d.key), ",", height, "V", y(d.value), "h9V", height);
}
return path.join("");
}
但我什至不明白这个函数中发生了什么，如果没有其他方法可以做到这一点，我也不知道如何用这种方式打点。
最佳答案
我没有尝试绘制部分条形图(正如您的编辑似乎建议的那样)，而是将条形图附加两次，一次在底部为灰色，然后在顶部为钢蓝色。然后你可以只对蓝色条应用一个剪辑路径，当它们被剪辑时你会看到下面的灰色。
完整代码:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<style>
.charts {
padding: 10px 0;
}
.chart {
padding-left: 20px;
padding-top: 10px;
}
.axis text {
font: 10px sans-serif;
fill: black;
}
.chart text {
font: 10px sans-serif;
fill: black;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
/*dont display yAxis for categorical variable*/
#chart .y.axis g {
display: none;
}
/*Labels in categorical chart */
text#catTitle.catTitle {
font: 10px sans-serif;
fill: white;
}
/*Color for the brush */
.brush rect.extent {
fill: steelblue;
fill-opacity: .125;
}
/*Color for the brush resize path*/
.brush .resize path {
fill: #eee;
stroke: #666;
}
/*Color for the hidden object*/
.hidden {
fill: grey;
}
.bar {
fill: steelblue;
}
</style>
</head>
<body>
<svg class="chart" id="chart"></svg>
<script>
var data = [{
key: 1,
value: 37
}, {
key: 1.5,
value: 13
}, {
key: 2.5,
value: 1
}, {
key: 3,
value: 4
}, {
key: 3.5,
value: 14
}, {
key: 4,
value: 18
}, {
key: 4.5,
value: 21
}, {
key: 5,
value: 17
}, {
key: 5.5,
value: 16
}, {
key: 6,
value: 5
}, {
key: 6.5,
value: 4
}];
var margin = {
top: 10,
right: 41,
bottom: 42,
left: 10
};
var width = 400 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) {
return d.value
})])
.range([height, 0]);
var x = d3.scale.linear()
.domain([0, d3.max(data, function(d) {
return d.key;
}) + 1])
.rangeRound([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var chart = d3.select(".chart#chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", 15 + "px");
chart.append("defs")
.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
var brush = d3.svg.brush()
.x(x)
.on("brush", brushed)
.on("brushend", brushend);
function brushend() {
if (brush.empty()){
chart.select("#clip>rect")
.attr("x", 0)
.attr("width", width);
}
}
function brushed() {
var e = brush.extent();
chart.select("#clip>rect")
.attr("x", x(e[0]))
.attr("width", x(e[1]) - x(e[0]));
}
chart.selectAll(".hidden")
.data(data)
.enter().append("rect")
.attr("class", "hidden")
.attr("x", function(d) {
return x(d.key);
})
.attr("y", function(d) {
return y(d.value);
})
.attr("height", function(d) {
return height - y(d.value);
})
.attr("width", x(0.5))
.style("stroke", "white")
.append("title")
.text(function(d) {
return d.key;
});
chart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("clip-path", "url(#clip)")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.key);
})
.attr("y", function(d) {
return y(d.value);
})
.attr("height", function(d) {
return height - y(d.value);
})
.attr("width", x(0.5))
.style("stroke", "white")
.append("title")
.text(function(d) {
return d.key;
});
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("text") //Add chart title
.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Petal Length");
chart.append("g")
.attr("class", "y axis")
.call(yAxis);
chart.append("g")
.attr("class", "x brush")
.call(brush) //call the brush function, causing it to create the rectangles
.selectAll("rect") //select all the just-created rectangles
.attr("y", -6)
.attr("height", (height + margin.top)) //set their height
function resizePath(d) {
var e = +(d == "e"),
x = e ? 1 : -1,
y = height / 3;
return "M" + (.5 * x) + "," + y + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y) + "Z" + "M" + (2.5 * x) + "," + (y + 8) + "V" + (2 * y - 8) + "M" + (4.5 * x) + "," + (y + 8) + "V" + (2 * y - 8);
}
chart.selectAll(".resize").append("path").attr("d", resizePath);
</script>
</body>
</html>
关于javascript - d3.js画笔填充颜色直方图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38785294/
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
我有一个驼峰式字符串，例如:JustAString。我想按照以下规则形成长度为4的字符串:抓取所有大写字母；如果超过4个大写字母，只保留前4个；如果少于4个大写字母，则将最后大写字母后的字母大写并添加字母，直到长度变为4。以下是可能发生的3种情况:ThisIsMyString将产生TIMS(大写字母)；ThisIsOneVeryLongString将产生TIOV(前4个大写字母)；MyString将生成MSTR(大写字母+tr大写)。我设法用这个片段解决了前两种情况:str.scan(/[A-Z]/).first(4).join但是，我不太确定如何最好地修改上面的代码片段以处理最后一种
如何使用Ruby的默认Curses库获取颜色？所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello
状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我正在尝试解决http://projecteuler.net/problem=1.我想创建一个方法，它接受一个整数，然后创建一个包含它前面的所有整数的数组，并将整数本身作为数组中的值。以下是我目前所拥有的。代码不起作用。defmake_array(num)numbers=Array.newnumcount=1numbers.eachdo|number|numbers 最佳答案 (1..num).to_a是您在Ruby中需要做的全部。1..num将创建一个Range对象，以1开始并以任意值num结束是。Range对象有to_a方法通过
如果我想要“00001”而不是“1”，除了我自己写填零方法之外，有没有内置的方法可以帮助我为整数填零？ 最佳答案 puts"%05d"%1#00001参见:String::%,Kernel::sprintf这是正在发生的事情。%左侧的"%05d"是C风格的格式说明符。%右边的变量就是要格式化的东西。格式说明符可以像这样解码:%-格式说明符的开头0-用前导零填充5-长度为5个字符d-被格式化的是一个整数如果你要格式化多个东西，你会把它们放在一个数组中:"%d-%s"%[1,"One"]#=>1-one
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http: