Javascript 只有在选择索引值大于当前颜色索引的颜色时，才能通过鼠标向下应用颜色
我的简单绘图软件允许将不同的颜色应用于县。我一直在努力解决一个相当奇怪的错误，它只允许索引值大于当前颜色索引的颜色覆盖颜色 代码很长，但我不确定是否可以在不粘贴整个内容的情况下说明这一点。我将从主要部分开始： 下面是填充十六进制颜色数组的Javascript 只有在选择索引值大于当前颜色索引的颜色时，才能通过鼠标向下应用颜色,javascript,html,css,arrays,d3.js,Javascript,Html,Css,Arrays,D3.js,我的简单绘图软件允许将不同的颜色应用于县。我一直在努力解决一个相当奇怪的错误，它只允许索引值大于当前颜色索引的颜色覆盖颜色 代码很长，但我不确定是否可以在不粘贴整个内容的情况下说明这一点。我将从主要部分开始： 下面是填充十六进制颜色数组的getColor（）函数，我认为部分问题在于此： function getColor(index) { var colorarray = [ '550000', '801515',
getColor（）function getColor(index) {
var colorarray = [
'550000',
'801515',
'aa3939',
'd46a6a',
'ffaaaa',
'003333',
'0d4d4d',
'226666',
'407f7f',
'669999',
'004400',
'116611',
'2d882d',
'55aa55',
'88cc88',
'552700',
'804515',
'aa6c39',
'd49a6a',
'ffd1aa',
];
return colorarray[index];
}
<!DOCTYPE html>
<title>Heartland Remapping Tool</title>
<link rel="shortcut icon" type="image/png" href="/faviconpng.png" />
<style>
svg {
width: 100%;
height: auto;
}
input {
border-width: 0px;
border: none;
width: 30px;
height: 30px;
cursor: pointer;
margin: 3px;
}
.c550000 {
fill: #550000;
stroke-width: .5px;
}
.c801515 {
fill: #801515;
stroke-width: .5px;
}
.caa3939 {
fill: #aa3939;
stroke-width: .5px;
}
.cd46a6a {
fill: #d46a6a;
stroke-width: .5px;
}
.cffaaaa {
fill: #ffaaaa;
stroke-width: .5px;
}
.c003333 {
fill: #003333;
stroke-width: .5px;
}
.c0d4d4d {
fill: #0d4d4d;
stroke-width: .5px;
}
.c226666 {
fill: #226666;
stroke-width: .5px;
}
.c407f7f {
fill: #407f7f;
stroke-width: .5px;
}
.c669999 {
fill: #669999;
stroke-width: .5px;
}
.c004400 {
fill: #004400;
stroke-width: .5px;
}
.c116611 {
fill: #116611;
stroke-width: .5px;
}
.c2d882d {
fill: #2d882d;
stroke-width: .5px;
}
.c55aa55 {
fill: #55aa55;
stroke-width: .5px;
}
.c88cc88 {
fill: #88cc88;
stroke-width: .5px;
}
.c552700 {
fill: #552700;
stroke-width: .5px;
}
.c804515 {
fill: #804515;
stroke-width: .5px;
}
.caa6c39 {
fill: #aa6c39;
stroke-width: .5px;
}
.cd49a6a {
fill: #d49a6a;
stroke-width: .5px;
}
.cffd1aa {
fill: #ffd1aa;
stroke-width: .5px;
}
.counties {
fill: white;
stroke: #7887AB;
stroke-width: .5px;
}
.counties .hovered,
.counties :hover {
fill: #061539;
stroke-width: .5px;
}
.selected {
fill: #061539;
}
.erase {
fill: none;
}
.deselected {
fill: white;
stroke-width: .5px;
}
.deselected :hover {
fill: #061539;
stroke-width: .5px;
}
.county-borders {
fill: none;
stroke: #F0F8FF;
stroke-width: .2px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
.state-borders {
fill: none;
stroke: #162955;
opacity: .8;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
.toolTip {
position: absolute;
display: none;
min-width: 80px;
height: auto;
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #6F257F;
padding: 14px;
text-align: center;
}
</style>
<script>
var selcolor;
window.onload = function() {
var defaultcolor = document.getElementById("first");
getSeletedColor(defaultcolor);
};
//this may be the cause of the fact that I can only overwrite colors with a color farther down the list.
function getColor(index) {
var colorarray = [
'550000',
'801515',
'aa3939',
'd46a6a',
'ffaaaa',
'003333',
'0d4d4d',
'226666',
'407f7f',
'669999',
'004400',
'116611',
'2d882d',
'55aa55',
'88cc88',
'552700',
'804515',
'aa6c39',
'd49a6a',
'ffd1aa',
];
return colorarray[index];
}
function getSeletedColor(val) {
var coloritem = document.getElementById('selcolor');
coloritem.value = val.value;
var dispitem = document.getElementById('current_color');
dispitem.style.background = val.style.backgroundColor;
dispitem.value = val.value;
}
</script>
<input id="selcolor" hidden="true" value="hhhhhh"></input>
<div id="option">
<input style="width: 90px; height: 18px;" name="updateButton" type="button" value="Print Regions" onclick="dl_csv()" />
</div>
<div id="option">
<input style="width: 90px; height: 18px;" name="updateButton" type="button" value="Reset" onclick="window.location.reload()" />
</div>
<br/>
<div>
<form id="colorlist">
<input id="first" style="background-color:#550000; color: #550000;" value="550000" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#801515; color: #801515;" value="801515" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#aa3939; color: #aa3939;" value="aa3939" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#d46a6a; color: #d46a6a;" value="d46a6a" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#ffaaaa; color: #ffaaaa;" value="ffaaaa" onmousedown="getSeletedColor(this)">
<br/>
<input spellcheck="false" style="background-color:#003333; color: #003333;" value="003333" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#0d4d4d; color: #0d4d4d;" value="0d4d4d" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#226666; color: #226666;" value="226666" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#407f7f; color: #407f7f;" value="407f7f" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#669999; color: #669999;" value="669999" onmousedown="getSeletedColor(this)">
<br/>
<input spellcheck="false" style="background-color:#004400; color: #004400;" value="004400" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#116611; color: #116611;" value="116611" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#2d882d; color: #2d882d;" value="2d882d" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#55aa55; color: #55aa55;" value="55aa55" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#88cc88; color: #88cc88;" value="88cc88" onmousedown="getSeletedColor(this)">
<br/>
<input spellcheck="false" style="background-color:#552700; color: #552700;" value="552700" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#804515; color: #804515;" value="804515" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#aa6c39; color: #aa6c39;" value="aa6c39" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#d49a6a; color: #d49a6a;" value="d49a6a" onmousedown="getSeletedColor(this)">
<input spellcheck="false" style="background-color:#ffd1aa; color: #ffd1aa;" value="ffd1aa" onmousedown="getSeletedColor(this)">
</form>
<br/>
<input readonly hidden="true" style="background:white; width: 50px;" id="current_color" value="550000"></input>
<form action="">
<input style="margin: default; height: 18px; width: 15px;" type="radio" name="tool" value="zoompan" id="zoompan"> <u>Z</u>oom/Pan
<input style="margin: default; height: 18px; width: 15px;" type="radio" name="tool" value="select" id="select" checked> <u>S</u>elect
<input style="margin: default; height: 18px; width: 15px;" type="radio" name="tool" value="erase" id="erase"> <u>E</u>rase
</form>
<form action="">
<input style="margin: default; height: 18px; width: 15px;" type="radio" name="map" value="county" checked> County
<input style="margin: default; height: 18px; width: 15px;" type="radio" name="map" value="state"> State
<input style="margin: default; height: 18px; width: 15px;" type="radio" name="map" value="other"> Other
</form>
</div>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<!--<script src="jscolor.js"></script>-->
<script>
var svg = d3.select("svg");
var path = d3.geoPath();
var tooltip = d3.select("body").append("div").attr("class", "toolTip");
var clickDown = true;
var color_selcounties = [];
for (i = 0; i < 20; i++) {
color_selcounties[getColor(i)] = [];
}
var selectedCounties = [];
var uniqueCounties = [];
var selectedCountiesNum = selectedCounties.length;
var t = [
['color', 'fips']
];
var csvRows = [];
var expArray = [
['color', 'fips']
];
var region = function() {
//Dedupes the list of counties, this ensures no counties are double bucketed.
uniqueCounties = selectedCounties.filter(function(elem, pos) {
return selectedCounties.indexOf(elem) == pos;
});
console.log("Master: " + uniqueCounties);
//Dedupes the list of counties by region.
for (i = 0; i < 20; i++) {
if (color_selcounties[getColor(i)].length >= 1) {
var uniqueColorCounties = color_selcounties[getColor(i)].filter(function(elem, pos) {
return color_selcounties[getColor(i)].indexOf(elem) == pos;
});
console.log(getColor(i) + ": " + uniqueColorCounties);
t.push([getColor(i), uniqueColorCounties]);
}
}
}
var tools = function() {
if (document.getElementById("zoompan").checked) {
alert("zoompan");
} else if (document.getElementById("select").checked) {
alert("select");
} else if (document.getElementById("erase").checked) {
document.body.style.cursor = "pointer";
} else {
}
}
function dl_csv() {
region();
var csvString = expArray.join("%0A");
var a = document.createElement('a');
a.href = 'data:attachment/csv,' + csvString;
a.target = '_blank';
a.download = 'myFile.csv';
document.body.appendChild(a);
a.click();
}
d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
if (error) throw error;
let hoverEnabled = false;
var mousedown = function() {
if (document.getElementById("select").checked) {
var self = d3.select(this);
hoverEnabled = !self.classed('hovered');
if (hoverEnabled) {
selectedCounties.push(this.__data__.id);
var color = document.getElementById('selcolor').value;
self.classed("c" + color, true);
color_selcounties[color].push(this.__data__.id);
expArray.push([color, this.__data__.id]);
} else {
var ix = selectedCounties.indexOf(this.__data__.id);
selectedCounties.splice(ix, 1);
}
} else if (document.getElementById("erase").checked) {
var self = d3.select(this);
self.classed('deselected', true);
var ix = selectedCounties.indexOf(this.__data__.id);
selectedCounties.splice(ix, 1);
}
}
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter()
.append("path")
.attr("d", path);
svg.append("g")
.attr("class", "state-borders")
.selectAll("path")
.data(topojson.feature(us, us.objects.nation).features)
.enter()
.append("path")
.attr("d", path);
svg.append("path")
.attr("class", "state-borders")
.attr("d", path(topojson.mesh(us, us.objects.nation, function(a, b) {
return a !== b;
})));
svg.append("path")
.attr("class", "state-borders")
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) {
return a !== b;
})));
svg.append("path")
.attr("class", "county-borders")
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) {
return a !== b;
})));
svg.selectAll('.counties path')
.on('mousedown', mousedown)
.on('mouseup', function() {
hoverEnabled = false;
})
.on('mouseover', function() {
tooltip
.style("left", 500 + "px")
.style("top", 70 + "px")
.style("display", "inline-block")
.html(this.__data__.id);
var color = document.getElementById('selcolor').value;
var self = d3.select(this);
if (hoverEnabled) {
self.classed("deselected", false);
self.classed("c" + color, true);
selectedCounties.push(this.__data__.id);
color_selcounties[color].push(this.__data__.id);
expArray.push([color, this.__data__.id]);
}
})
.on('mouseout', function(d) {
tooltip.style("display", "none");
});
});
</script>
心脏地带重映射工具
svg{
宽度：100%；
高度：自动；
}
输入{
边框宽度：0px；
边界：无；
宽度：30px；
高度：30px；
光标：指针；
保证金：3倍；
}
.c550000{
填写：#550000；
笔划宽度：.5px；
}
.c801515{
填充：#801515；
笔划宽度：.5px；
}
.caa3939{
填充：#aa3939；
笔划宽度：.5px；
}
.cd46a6a{
填充：#d46a6a；
笔划宽度：.5px；
}
.cffaaaa{
填充：#ffaaa；
笔划宽度：.5px；
}
.c003333{
填充：#003333；
笔划宽度：.5px；
}
.c0d4d{
填充：#0d4d；
笔划宽度：.5px；
}
.c226666{
填充：#226666；
笔划宽度：.5px；
}
.c407f7f{
填充：#407f7f；
笔划宽度：.5px；
}
.c669999{
填充：#669999；
笔划宽度：.5px；
}
.c004400{
填充：#004400；
笔划宽度：.5px；
}
.c116611{
填写：#116611；
笔划宽度：.5px；
}
.c2d882d{
填充：#2d882d；
笔划宽度：.5px；
}
.c55aa55{
填充：#55aa55；
笔划宽度：.5px；
}
.c88cc88{
填充：#88cc88；
笔划宽度：.5px；
}
.c552700{
填充：#552700；
笔划宽度：.5px；
}
.c804515{
填充：#804515；
笔划宽度：.5px；
}
.caa6c39{
填充物：#aa6c39；
笔划宽度：.5px；
}
.cd49a6a{
填充：#d49a6a；
笔划宽度：.5px；
}
.cffd1aa{
填充：#ffd1aa；
笔划宽度：.5px；
}
.县{
填充物：白色；
冲程：#7887AB；
笔划宽度：.5px；
}
.县.盘旋，
.悬停{
填充：#061539；
笔划宽度：.5px；
}
.选定{
填充：#061539；
}
.抹掉{
填充：无；
}
.取消选择{
填充物：白色；
笔划宽度：.5px；
}
.取消选择：悬停{
填充：#061539；
笔划宽度：.5px；
}
.县边界{
填充：无；
行程：#F0F8FF；
笔划宽度：.2px；
笔划线条连接：圆形；
笔划线头：圆形；
指针事件：无；
}
.国家边界{
填充：无；
冲程：#162955；
不透明度：.8；
笔划线条连接：圆形；
笔划线头：圆形；
指针事件：无；
}
.工具提示{
位置：绝对位置；
显示：无；
最小宽度：80px；
高度：自动；
背景：无重复滚动0 0#ffffff；
边框：1px实心#6F257F；
填充：14px；
文本对齐：居中；
}
色变；
window.onload=函数（）{
var defaultcolor=document.getElementById（“第一”）；
getSeletedColor（默认颜色）；
};
//这可能是我只能用列表后面的颜色覆盖颜色的原因。
函数getColor（索引）{
var colorarray=[
'550000',
'801515',
“aa3939”，
“d46a6a”，
“AAA”，
'003333',
“0D4D”，
'226666',
‘407f7f’，
'669999',
'004400',
'116611',
“2d882d”，
‘55aa55’，
‘88cc88’，
'552700',
'804515',
‘aa6c39’，
“d49a6a”，
“ffd1aa”，
];
返回colorarray[索引]；
}
函数getSeletedColor（val）{
var coloritem=document.getElementById（'selcolor'）；
coloritem.value=val.value；
var dispitem=document.getElementById（'current_color'）；
dispitem.style.background=val.style.backgroundColor；
dispitem.value=val.value；
}
缩放/平移
挑选
擦除
县
陈述
其他
var svg=d3.选择（“svg”）；
var path=d3.geoPath（）；
var tooltip=d3.select（“body”）.append（“div”）.attr（“class”，“tooltip”）；
var clickDown=true；
var color_self=[]；
对于（i=0；i<20；i++）{
颜色[getColor（i）]=[]；
}
var selectedcountries=[]；
var UniqueCountries=[]；
var selectedCountiesNum=selectedcountries.length；
变量t=[
['color'，'fips']
];
var csvRows=[]；
var expArray=[
['color'，'fips']
];
变量区域=函数（）{
//重复删除县列表，这可确保没有县是双重的。
UniqueCountries=SelectedCountries.filter（fu
self.classed("c" + color, true);
class = "foo bar baz"
self.attr("class", "c" + color);