我已经找到了不同的方法来做到这一点,其中一个是使用text-anchor:middle。
然而,这似乎在我的案例中起作用。我已经附加了一个JSfiddle,以便更容易理解/修复,但我的目标是将以"用户"
开头的标签居中我正在寻找一个答案来解释为什么这对于文本锚不可行以及为什么给出的解决方案有效。
<svg width="1026" height="500" class="d3-plot"><g transform="translate(150,0)"><g class="x axis"><g class="tick" transform="translate(0,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">0</text></g><g class="tick" transform="translate(86,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">10</text></g><g class="tick" transform="translate(171,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">20</text></g><g class="tick" transform="translate(257,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">30</text></g><g class="tick" transform="translate(342,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">40</text></g><g class="tick" transform="translate(428,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">50</text></g><g class="tick" transform="translate(514,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">60</text></g><g class="tick" transform="translate(599,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">70</text></g><g class="tick" transform="translate(685,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">80</text></g><g class="tick" transform="translate(770,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">90</text></g><g class="tick" transform="translate(856,0)" style="opacity: 1;"><line y2="-6" x2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy="0em" y="-9" x="0" style="text-anchor: middle;">100</text></g><path class="domain" d="M0,-6V0H856V-6" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></path></g><g class="y axis" transform="translate(0,0)"><g class="tick" transform="translate(0,34)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 1</text></g><g class="tick" transform="translate(0,82)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 2</text></g><g class="tick" transform="translate(0,130)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 3</text></g><g class="tick" transform="translate(0,178)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 4</text></g><g class="tick" transform="translate(0,226)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 5</text></g><g class="tick" transform="translate(0,274)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 6</text></g><g class="tick" transform="translate(0,322)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 7</text></g><g class="tick" transform="translate(0,370)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 8</text></g><g class="tick" transform="translate(0,418)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 9</text></g><g class="tick" transform="translate(0,466)" style="opacity: 1;"><line x2="-6" y2="0" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line><text dy=".32em" x="-9" y="0" style="text-anchor: end;">User 10 User 10</text></g><path class="domain" d="M-6,0H0V500H-6" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></path></g><g class="bar" transform="translate(0,17)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="even" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="343" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="685" width="171" style="fill: rgb(236, 236, 236);"></rect><text x="685" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g></g><g class="bar" transform="translate(0,65)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="uneven" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="172" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g><g class="subbar"><rect height="34" x="514" width="342" style="fill: rgb(236, 236, 236);"></rect><text x="514" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g></g><g class="bar" transform="translate(0,113)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="even" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="172" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g><g class="subbar"><rect height="34" x="514" width="342" style="fill: rgb(236, 236, 236);"></rect><text x="514" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g></g><g class="bar" transform="translate(0,161)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="uneven" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="172" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g><g class="subbar"><rect height="34" x="514" width="342" style="fill: rgb(236, 236, 236);"></rect><text x="514" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g></g><g class="bar" transform="translate(0,209)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="even" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="172" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g><g class="subbar"><rect height="34" x="514" width="342" style="fill: rgb(236, 236, 236);"></rect><text x="514" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g></g><g class="bar" transform="translate(0,257)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="uneven" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="343" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="685" width="171" style="fill: rgb(236, 236, 236);"></rect><text x="685" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g></g><g class="bar" transform="translate(0,305)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="even" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="172" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g><g class="subbar"><rect height="34" x="514" width="342" style="fill: rgb(236, 236, 236);"></rect><text x="514" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g></g><g class="bar" transform="translate(0,353)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="uneven" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="172" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g><g class="subbar"><rect height="34" x="514" width="342" style="fill: rgb(236, 236, 236);"></rect><text x="514" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g></g><g class="bar" transform="translate(0,401)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="even" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="172" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g><g class="subbar"><rect height="34" x="514" width="342" style="fill: rgb(236, 236, 236);"></rect><text x="514" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g></g><g class="bar" transform="translate(0,449)"><rect height="34" x="1" width="856" fill-opacity="0.5" class="uneven" style="fill: rgb(245, 245, 245);"></rect><g class="subbar"><rect height="34" x="0" width="342" style="fill: rgb(154, 223, 43);"></rect><text x="0" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g><g class="subbar"><rect height="34" x="342" width="172" style="fill: rgb(239, 71, 58);"></rect><text x="342" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">2</text></g><g class="subbar"><rect height="34" x="514" width="342" style="fill: rgb(236, 236, 236);"></rect><text x="514" y="17" dy="0.5em" dx="0.5em" style="font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 10px; line-height: normal; font-family: sans-serif;">4</text></g></g><g class="y axis axis-line"><line x1="171" x2="171" y2="500" style="fill: none; stroke: rgb(0, 0, 0); shape-rendering: crispEdges;"></line></g></g></svg>