0

I am using d3.js to build a timeline which has axis.

Now, in order to make the time range more visible i have increased the axis's tick to a certain width and length as shown in the image below enter image description here

The gray and white stripes below are actually the tick lines of the axis which looks something like this in terms of code:

<g class="tick" transform="translate(1241.7410071942445,0)" style="opacity: 1;">
    <line y2="-457px" x2="0" y1="55px" style="stroke-width: 202px;"></line>
    <text y="3" x="0" dy=".71em" style="text-anchor: middle;">Oct 05</text>
</g>

Now, I want to create a border around these stripes. I tried something like this:

<g class="tick" transform="translate(1241.7410071942445,0)" style="opacity: 1;">
    <line y2="-457px" x2="0" y1="55px" style="stroke-width: 202px; border: 1px solid black">  </line>
    <text y="3" x="0" dy=".71em" style="text-anchor: middle;">Oct 05</text>
</g>

As expected, this clearly did not work and I cannot find any way to achieve that. Any Ideas?

Devin
  • 7,690
  • 6
  • 39
  • 54
Cute_Ninja
  • 4,742
  • 4
  • 39
  • 63
  • possible duplicate of [How to make an SVG "line" with a border around it?](http://stackoverflow.com/questions/8845426/how-to-make-an-svg-line-with-a-border-around-it) – Luizgrs Oct 03 '14 at 18:48
  • I have looked at it but in my case it will be tricky because these lines are drawn by d3 itself as a part of axis. If I were drawing these lines, I would have rather used rect instead of lines for this purpose – Cute_Ninja Oct 03 '14 at 18:56
  • but the problem is that lines do not have filling, they can have only one color (from stroke). I believe you won't be able to do what you want without adding new lines or replace it by a rect. – Luizgrs Oct 03 '14 at 19:00
  • Is it possible using linear gradients? – Cute_Ninja Oct 03 '14 at 19:36

1 Answers1

1

You can use an SVG filter to add an outline around a line.

<svg width="200" height="200" 
     viewPort="0 0 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <filter id="outline" x="-20%" y="-20%" width="140%" height="140%">
      <feMorphology operator="dilate" radius="1"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0
                                           0 0 0 0 0
                                           0 0 0 0 0 
                                           0 0 0 1 0"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
        </feMerge>
      <filter>
  </defs>

      <g filter="url(#outline)" >
    <line x1="40" y1="120" 
          x2="120" y2="40" 
          stroke="red" 
          stroke-width="10"/>
      </g>
</svg>
Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Awesome, this worked. I added the filter around the entire axis (not just the line), and it seemed to work. THanks – Cute_Ninja Oct 03 '14 at 21:35