1
전단지 범례에 SVG 원을 추가하는 가장 간단한 방법이 궁금합니다. 크기를 업데이트 할 필요가 없습니다. 지정된 반지름 (크기에는 문제가 없습니다)과 지정된 색상이있는 원을 원합니다. 세 가지 다른지도 레이어가 있는데, 서로 다른 색깔의 점이 각각 표시됩니다.전단지 범례의 SVG circle 요소
나는이 레이어들을 토글 할 수있는 세 개의 체크 박스를 가지고 있으며, 각 체크 박스가 켜져 있거나 꺼져있는 레이어를 나타내는 다른 색상의 원을 표시하도록합니다. 아래는 체크 박스 스크립트입니다. SVG 요소로 표시 할 원을 얻을 수 있습니다. 그러나 나는 그것을 '패널'에 붙이기를 원하지 않지만 각 체크 박스 (또는 그 옆)에 3 개의 SVG를 붙이고 싶다. 여기 내 코드는 다음과 같습니다
$('#panel').append('<input type="checkbox" id="checkboxCity3" class="Cities3" id="showResidents" value="true" checked="checked" style="-moz-box-shadow: 0px 10px 14px -7px #383838; -webkit-box-shadow: 0px 10px 14px -7px #383838; box-shadow: 0px 10px 14px -7px #383838; background-color:#FFF; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; display:inline-block; cursor:pointer; color:#000000; font-family:avenir; font-size:10px; font-weight:bold; padding:8px 14px; text-decoration:none;">Show Residents</button>');
$('#panel').append('<input type="checkbox" id="checkboxCity" class="Cities" id="showFellows" value="true" checked="checked" style="-moz-box-shadow: 0px 10px 14px -7px #383838; -webkit-box-shadow: 0px 10px 14px -7px #383838; box-shadow: 0px 10px 14px -7px #383838; background-color:#FFF; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; display:inline-block; cursor:pointer; color:#000000; font-family:avenir; font-size:1px; font-weight:bold; padding:8px 14px; text-decoration:none;">Show Fellows</button>');
$('#panel').append('<input type="checkbox" id="checkboxCity2" class="Cities2" id="showResidentFellows" value="true" checked="checked" style="-moz-box-shadow: 0px 10px 14px -7px #383838; -webkit-box-shadow: 0px 10px 14px -7px #383838; box-shadow: 0px 10px 14px -7px #383838; background-color:#FFF; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; display:inline-block; cursor:pointer; color:#000000; font-family:avenir; font-size:1px; font-weight:bold; padding:8px 14px; text-decoration:none;">Show Residents/<br>Fellows</button>');
d3.select('#panel').append("svg").attr("width", 60).attr("height", 60).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");
을 그러나, 나는 실제 체크 박스에 원을 추가하려고하면, 그것은 작동하지 않습니다 사전에
d3.select('#checkboxCity3').append("svg").attr("width", 60).attr("height", 60).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");
감사합니다!